{{define "edit_access"}}
<div class="sg-container" style="justify-content: center;">
  <div style="flex: 1; display: flex; align-items: flex-start; padding-top: 5vh; justify-content: center;">
    <div class="data-card" style="padding: 48px; max-width: 640px; width: 100%;">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px;">
        <div>
          <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 8px;">Edit access</h1>
          <p style="color: var(--text-muted); font-weight: 300;">{{.GranteeName}}'s access to {{.TargetDossier.Name}}</p>
        </div>
        <a href="/dossier/{{.TargetDossier.DossierID}}" class="btn btn-secondary btn-small">{{.T.back}}</a>
      </div>

      {{if .Error}}<div class="error">{{.Error}}</div>{{end}}
      {{if .Success}}<div class="success">{{.Success}}</div>{{end}}

      <form action="/dossier/{{.TargetDossier.DossierID}}/access/{{.GranteeID}}" method="POST">
        <input type="hidden" name="action" value="update">

        <!-- Base Permissions -->
        <div style="margin-bottom: 32px;">
          <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 16px;">Permissions</h3>
          <div style="display: flex; gap: 24px; flex-wrap: wrap;">
            <label class="checkbox-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" name="op_r" value="1" {{if .HasRead}}checked{{end}}>
              <span>Read</span>
            </label>
            <label class="checkbox-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" name="op_w" value="1" {{if .HasWrite}}checked{{end}}>
              <span>Write</span>
            </label>
            <label class="checkbox-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" name="op_d" value="1" {{if .HasDelete}}checked{{end}}>
              <span>Delete</span>
            </label>
            <label class="checkbox-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
              <input type="checkbox" name="op_m" value="1" {{if .HasManage}}checked{{end}}>
              <span>Manage</span>
            </label>
          </div>
        </div>

        <!-- Category Access -->
        <div style="margin-bottom: 32px; border-top: 1px solid var(--border-light); padding-top: 32px;">
          <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 8px;">Data access</h3>
          <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px;">Select which types of data this person can access. Unchecked categories will be hidden.</p>

          <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
            {{range .Categories}}
            <label class="checkbox-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px; background: var(--bg-muted); border-radius: 8px;">
              <input type="checkbox" name="cat_{{.ID}}" value="1" {{if .Allowed}}checked{{end}}>
              <span>{{.Name}}</span>
            </label>
            {{end}}
          </div>
        </div>

        <!-- Entry-specific access -->
        {{if .EntryGrants}}
        <div style="margin-bottom: 32px; border-top: 1px solid var(--border-light); padding-top: 32px;">
          <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 16px;">Specific items shared</h3>
          {{range .EntryGrants}}
          <div class="data-row" style="display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-light);">
            <div>
              <span style="font-weight: 500;">{{.Description}}</span>
              <span style="color: var(--text-muted); font-size: 0.85rem; margin-left: 8px;">{{.CategoryName}}</span>
            </div>
            <button type="submit" name="remove_entry" value="{{.EntryID}}" class="btn btn-danger btn-small">Remove</button>
          </div>
          {{end}}
        </div>
        {{end}}

        <div style="display: flex; gap: 12px; margin-top: 24px;">
          <a href="/dossier/{{.TargetDossier.DossierID}}" class="btn btn-secondary" style="flex: 1; text-align: center;">{{.T.cancel}}</a>
          <button type="submit" class="btn btn-primary" style="flex: 1;">Save changes</button>
        </div>
      </form>

      <!-- Revoke all access -->
      <div style="border-top: 1px solid var(--border-light); padding-top: 32px; margin-top: 32px;">
        <form action="/dossier/{{.TargetDossier.DossierID}}/access/{{.GranteeID}}" method="POST" onsubmit="return confirm('Revoke all access for {{.GranteeName}}?');">
          <input type="hidden" name="action" value="revoke">
          <button type="submit" class="btn btn-danger" style="width: 100%;">Revoke all access</button>
        </form>
      </div>
    </div>
  </div>
</div>
{{end}}