{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="container mt-4">

  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">{% translate "Accueil" %}</a></li>
      <li class="breadcrumb-item active">{% translate "Modifier un accès" %}</li>
    </ol>
  </nav>

  <div class="card shadow-sm">
    <div class="card-header d-flex align-items-center gap-2">
      <i class="bi bi-shield-lock fs-5"></i>
      <strong>{% translate "Modifier l'accès" %}</strong>
      <span class="text-muted">— {{ access.user_config.user.get_full_name|default:access.user_config.user.username }}</span>
    </div>
    <div class="card-body">

      <form method="post">
        {% csrf_token %}

        <!-- Object info (read-only) -->
        <div class="mb-3 p-2 bg-light rounded border">
          <small class="text-muted">
            <strong>{% translate "Type :" %}</strong> {{ access.content_type.model }}
            &nbsp;|&nbsp;
            <strong>{% translate "Objet #" %}{{ access.object_id }}</strong>
          </small>
        </div>

        <!-- Permissions -->
        <div class="mb-3">
          <label class="form-label fw-semibold">{% translate "Droits" %}</label>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="can_view" id="edit_can_view"
                   {% if access.can_view %}checked{% endif %}>
            <label class="form-check-label" for="edit_can_view">{% translate "Peut visualiser" %}</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="can_edit" id="edit_can_edit"
                   {% if access.can_edit %}checked{% endif %}>
            <label class="form-check-label" for="edit_can_edit">{% translate "Peut modifier" %}</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="can_delete" id="edit_can_delete"
                   {% if access.can_delete %}checked{% endif %}>
            <label class="form-check-label" for="edit_can_delete">{% translate "Peut supprimer" %}</label>
          </div>
        </div>

        <div class="mb-4"></div>

        <!-- Visible fields -->
        <div class="mb-4">
          <div class="d-flex align-items-center gap-1 mb-1">
            <label class="form-label fw-semibold mb-0">
              {% translate "Champs visibles" %}
              <small class="text-muted fw-normal">({% translate "vide = tous les champs" %})</small>
            </label>
            <div class="ms-auto d-flex gap-2">
              <a href="#" class="small" onclick="toggleFields('vf-edit', true); return false;">{% translate "Tout cocher" %}</a>
              <span class="text-muted">|</span>
              <a href="#" class="small" onclick="toggleFields('vf-edit', false); return false;">{% translate "Tout décocher" %}</a>
            </div>
          </div>
          <div id="vf-edit" class="border rounded p-2 bg-white" style="max-height:220px;overflow-y:auto;">
            {% for value, label in field_choices %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox"
                     name="visible_fields" value="{{ value }}"
                     id="vf_{{ value }}"
                     {% if access.visible_fields and value in access.visible_fields %}checked{% endif %}>
              <label class="form-check-label small" for="vf_{{ value }}">{{ label }}</label>
            </div>
            {% empty %}
            <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
            {% endfor %}
          </div>
        </div>

        <!-- Editable fields -->
        <div class="mb-4">
          <div class="d-flex align-items-center gap-1 mb-1">
            <label class="form-label fw-semibold mb-0">
              {% translate "Champs modifiables" %}
              <small class="text-muted fw-normal">({% translate "vide = droits par rôle" %})</small>
            </label>
            <div class="ms-auto d-flex gap-2">
              <a href="#" class="small" onclick="toggleFields('ef-edit', true); return false;">{% translate "Tout cocher" %}</a>
              <span class="text-muted">|</span>
              <a href="#" class="small" onclick="toggleFields('ef-edit', false); return false;">{% translate "Tout décocher" %}</a>
            </div>
          </div>
          <div id="ef-edit" class="border rounded p-2 bg-white" style="max-height:220px;overflow-y:auto;">
            {% for value, label in field_choices %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox"
                     name="editable_fields" value="{{ value }}"
                     id="ef_{{ value }}"
                     {% if access.editable_fields and value in access.editable_fields %}checked{% endif %}>
              <label class="form-check-label small" for="ef_{{ value }}">{{ label }}</label>
            </div>
            {% empty %}
            <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
            {% endfor %}
          </div>
        </div>

        

        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-save me-1"></i>{% translate "Enregistrer" %}
          </button>
          <a href="{% url 'assets:asset_permissions_panel' access.content_type_id access.object_id %}"
             class="btn btn-outline-secondary btn-sm">
            {% translate "Annuler" %}
          </a>
        </div>
      </form>

    </div>
  </div>

</div>

<script>
function toggleFields(containerId, check) {
  document.querySelectorAll('#' + containerId + ' input[type="checkbox"]').forEach(function(cb) {
    cb.checked = check;
  });
}
</script>

{% endblock content %}