{% extends "whm/base.html" %}
{% block title %}Manage FTP{% endblock title %}
{% block content %}



<div class="card card-default">
      <div class="card-header">
        <h2>FTP User</h2>
        

      </div>
      <div class="card-body">
    <form method="post">
        {% csrf_token %}
      <div class="form-row">
            <div class="col-md-5">
 <label for="dbpass" style="margin-right: 10px;">Username</label>
<div class="form-group">
   
    <input type="text" id="dbuser" name="username" class="form-control" value="{{ ftp.user }}" readonly>
</div>



<label class="small mb-1" for="{{ user_form.domain.id_for_label }}">Document Root (File System Location):</label>
				  <div class="input-group mb-2 mr-sm-2">
				 
            <div class="input-group-prepend">
			
              <div class="input-group-text"><span class="mdi mdi-home"></span></div>
            </div>
            <input type="text" id="path" name="path" class="form-control" value="{{ file_path }}">
          </div>
				 

 <label for="spaceLimit" style="margin-right: 10px;">Space Limit (MB)</label>
         <div class="form-group form-inline mb-3" style="display: flex; align-items: center;">
   
    <select id="spaceLimit" name="space_limit" class="form-control">
        <option value="unlimited">Unlimited</option>
        <option value="100">100 MB</option>
        <option value="500">500 MB</option>
        <option value="1000">1 GB</option>
        <option value="1500">1.5 GB</option>
        <option value="2000">2 GB</option>
        <option value="3000">3 GB</option>
        <option value="4000">4 GB</option>
        <option value="5000">5 GB</option>
    </select>
</div>
 <label for="spaceLimit" style="margin-right: 10px;">Status</label>
 <div class="form-group form-inline mb-3" style="display: flex; align-items: center;">
   
    <select id="status" name="status" class="form-control">
        
        <option value="1">Running</option>
        <option value="0">Stop</option>
    </select>
</div>

       
		<label for="dbpass" style="margin-right: 10px;">Password</label>
<div class="form-group form-inline mb-3">
    
    <input type="text" id="dbpass" name="password" class="form-control" value=""  placeholder="{{ tips }}">
</div>
<label for="dbpassc" style="margin-right: 10px;">Confirm Password</label>
<div class="form-group form-inline mb-3" style="display: flex; align-items: center;">
    
    <input type="text" id="dbpassc" name="passwordc" class="form-control" value="" placeholder="{{ tips }}"> <button id="gen" class="btn btn-primary btn-md" onclick="return generateAndFillPassword();">Genarate</button>
</div>
		

 <div class="form-group">
            <button type="submit" class="mb-1 btn btn-success">Submit</button>
            <!-- Delete Button as a Form -->
                  
        </div>




		</div> </div>
    </form>
	
	
 {% if ftp.user != user.username %}
        <form action="{% url 'ftp_delete' ftp.id %}" method="post" style="display:inline;">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this FTP ?');">Delete</button>
                    </form>
        
    {% endif %}	
	
</div>
</div>


<script>


function removeHomePrefix(path) {
    return path.replace(/^\/home\/{{ user.username }}/, "");
}
  document.addEventListener("DOMContentLoaded", function() {
   var path = document.getElementById('path');
   path.value = removeHomePrefix({{ file_path }});
        // Get the disk usage value from the Django context (rendered in the template)
        var diskUsage = {{ ftp.QuotaSize|default:0 }};  // This will be the value from the backend
        
        // Get the select element
        var spaceLimitSelect = document.getElementById('spaceLimit');

        // Set the selected option based on the disk usage
        if (diskUsage === 0) {
            spaceLimitSelect.value = 'unlimited'; // Set to unlimited if usage is 0
        } else {
            spaceLimitSelect.value = diskUsage; // Set to the actual usage value
        }
		
		
		
		
		var status = {{ ftp.status|default:1 }};  // This will be the value from the backend
        
        // Get the select element
        var statusSelect = document.getElementById('status');

        // Set the selected option based on the disk usage
        if (status === 1) {
            statusSelect.value = '1'; // Set to unlimited if usage is 0
        } else {
            statusSelect.value = '0'; // Set to the actual usage value
        }
    });

    function generateStrongPassword(length = 16) {
        const lowercase = 'abcdefghijklmnopqrstuvwxyz';
        const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const digits = '0123456789';
        const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?';
        
        const allCharacters = lowercase + uppercase + digits + specialChars;
        let password = '';

        // Ensure the password contains at least one character from each category
        password += lowercase[Math.floor(Math.random() * lowercase.length)];
        password += uppercase[Math.floor(Math.random() * uppercase.length)];
        password += digits[Math.floor(Math.random() * digits.length)];
        password += specialChars[Math.floor(Math.random() * specialChars.length)];

        // Fill the rest of the password length with a mix of all characters
        for (let i = 4; i < length; i++) {
            password += allCharacters[Math.floor(Math.random() * allCharacters.length)];
        }

        // Shuffle the password to ensure randomness
        password = password.split('').sort(() => Math.random() - 0.5).join('');
        return password;
    }

    function generateAndFillPassword() {
        const password = generateStrongPassword();
        document.getElementById('dbpass').value = password;
        document.getElementById('dbpassc').value = password; // Set confirm password to match
        return false; // Prevent any default action (not strictly necessary here)
    }
</script>
{% endblock content %}
{% include "whm/footer.html" %}