{{define "content"}}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title"><i class="ti ti-plus"></i> Create Access Assignment</h3>
      </div>
      <div class="card-body">
        <form action="/assignments/add" method="POST" id="assignment-form">
          <!-- User Selection -->
          <div class="mb-3">
            <label class="form-label required">User</label>
            <select name="user_id" id="user-select" class="form-select" required>
              <option value="">– Select user –</option>
              {{range .AssignAllUsers}}
              <option value="{{.ID}}">{{.Username}} ({{.Email}})</option>
              {{end}}
            </select>
          </div>

          <!-- SSH Key Selection -->
          <div class="mb-3">
            <label class="form-label required">SSH Key</label>
            <select name="ssh_key_id" id="key-select" class="form-select" required>
              <option value="">– Select user first –</option>
            </select>
            <small class="form-hint">Only keys of the selected user are shown.</small>
          </div>

          <!-- Target Type -->
          <div class="mb-3">
            <label class="form-label required">Target Type</label>
            <div class="form-selectgroup">
              <label class="form-selectgroup-item">
                <input type="radio" name="target_type" value="host" class="form-selectgroup-input" checked onchange="toggleTarget()">
                <span class="form-selectgroup-label"><i class="ti ti-server"></i> Single Host</span>
              </label>
              <label class="form-selectgroup-item">
                <input type="radio" name="target_type" value="group" class="form-selectgroup-input" onchange="toggleTarget()">
                <span class="form-selectgroup-label"><i class="ti ti-folders"></i> Host Group</span>
              </label>
            </div>
          </div>

          <!-- Host Selection -->
          <div class="mb-3" id="host-section">
            <label class="form-label required">Host</label>
            <select name="server_id" id="server-select" class="form-select">
              <option value="">– Select host –</option>
              {{range .AssignAllHosts}}
              <option value="{{.ID}}">{{.Name}} ({{.Hostname}}:{{.Port}})</option>
              {{end}}
            </select>
          </div>

          <!-- Group Selection -->
          <div class="mb-3 d-none" id="group-section">
            <label class="form-label required">Host Group</label>
            <select name="group_id" id="group-select" class="form-select">
              <option value="">– Select group –</option>
              {{range .AssignAllGroups}}
              <option value="{{.ID}}">{{.Name}} ({{.ServerCount}} hosts)</option>
              {{end}}
            </select>
          </div>

          <!-- System User -->
          <div class="mb-3">
            <label class="form-label required">System User</label>
            <input type="text" name="system_user" class="form-control" placeholder="e.g. root, deploy, ubuntu" required>
            <small class="form-hint">The user account on the target host under which the key will be deployed.</small>
          </div>

          <!-- Desired State -->
          <div class="mb-3">
            <label class="form-label required">Desired State</label>
            <select name="desired_state" class="form-select">
              <option value="present" selected>Present – Key should be deployed</option>
              <option value="absent">Absent – Key should be removed</option>
            </select>
          </div>

          <!-- Options -->
          <div class="mb-3">
            <label class="form-label">Options</label>
            <div>
              <label class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="sudo">
                <span class="form-check-label">Grant sudo rights to the system user</span>
              </label>
            </div>
            <div class="mt-2">
              <label class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="create_user">
                <span class="form-check-label">Create system user on target host if it doesn't exist</span>
              </label>
            </div>
          </div>

          <div class="form-footer">
            <button type="submit" class="btn btn-primary">
              <i class="ti ti-shield-lock"></i> Create Assignment
            </button>
            <a href="/assignments" class="btn btn-outline-secondary ms-2">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
// Key data grouped by user ID
var keysByUser = {};
{{range .AssignAllKeys}}
if (!keysByUser[{{.UserID}}]) keysByUser[{{.UserID}}] = [];
keysByUser[{{.UserID}}].push({id: {{.ID}}, name: "{{.Name}}", type: "{{.KeyType}}"});
{{end}}

document.getElementById('user-select').addEventListener('change', function() {
  var uid = this.value;
  var keySelect = document.getElementById('key-select');
  keySelect.innerHTML = '<option value="">– Select key –</option>';
  if (uid && keysByUser[uid]) {
    keysByUser[uid].forEach(function(k) {
      var opt = document.createElement('option');
      opt.value = k.id;
      opt.textContent = k.name + ' (' + k.type + ')';
      keySelect.appendChild(opt);
    });
  }
});

function toggleTarget() {
  var isHost = document.querySelector('input[name="target_type"][value="host"]').checked;
  document.getElementById('host-section').classList.toggle('d-none', !isHost);
  document.getElementById('group-section').classList.toggle('d-none', isHost);
}
</script>
{{end}}