{% load i18n %}
{% comment %}
  Permission management panel for a single asset/location instance.
  Partial template: permission panel for a single asset/location instance.
  Included inside the asset detail page or served standalone via the URL.

  Required context:
    ct           — ContentType instance
    object_id    — int, PK of the object
  Optional (auto-populated when used standalone, must be provided when included):
    obj          — the model instance (for display)
    type_config  — AssetTypePermissionConfig instance
    accesses     — queryset of UserAssetAccess for this object
    all_user_configs — queryset of UserConfig for the user selector
    field_choices    — list of (value, label) tuples for editable fields
{% endcomment %}
{% load i18n %}

<div id="asset-permissions-panel" class="p-3">

  <!-- Type-level config banner -->
  <div class="mb-3 p-3 rounded border {% if type_config.requires_explicit_permissions %}border-warning bg-warning bg-opacity-10{% else %}border-secondary bg-light{% endif %}">
    <form method="post"
          action="{% url 'assets:asset_type_permissions_page' ct.pk %}"
          id="type-config-form">
      {% csrf_token %}
      <div class="d-flex align-items-center gap-3 flex-wrap">
        <div>
          <strong>{% translate "Type d'objet :" %}</strong> {{ ct.model }}
        </div>
        <div class="form-check form-switch mb-0">
          <input class="form-check-input" type="checkbox" role="switch"
                 id="id_requires_explicit"
                 name="requires_explicit_permissions"
                 {% if type_config.requires_explicit_permissions %}checked{% endif %}
                 onchange="document.getElementById('type-config-form').submit()">
          <label class="form-check-label" for="id_requires_explicit">
            {% translate "Droits explicites requis (droits thématiques insuffisants)" %}
          </label>
        </div>
        {% if type_config.requires_explicit_permissions %}
          <span class="badge bg-warning text-dark">
            <i class="bi bi-shield-lock me-1"></i>{% translate "Accès restreint" %}
          </span>
        {% endif %}
      </div>
    </form>
  </div>

  <!-- Type-level user access info (read-only, informational) -->
  {% if type_user_accesses %}
  <div class="mb-3 p-3 rounded border border-info bg-info bg-opacity-10">
    <div class="d-flex align-items-center gap-2 mb-2">
      <i class="bi bi-people-fill text-info"></i>
      <strong>{% translate "Accès au niveau du type (tous les objets)" %}</strong>
      <a href="{% url 'assets:asset_type_permissions_page' ct.pk %}"
         class="ms-auto btn btn-xs btn-outline-info btn-sm">
        <i class="bi bi-arrow-right me-1"></i>{% translate "Gérer" %}
      </a>
    </div>
    <p class="small text-muted mb-2">
      {% translate "Les utilisateurs ci-dessous ont un accès défini pour TOUS les objets de ce type. Ces droits s'appliquent à cet objet sauf si une ligne d'accès spécifique ci-dessous les écrase." %}
    </p>
    <table class="table table-sm table-hover align-middle mb-0 bg-white rounded">
      <thead class="table-light">
        <tr>
          <th>{% translate "Utilisateur" %}</th>
          <th class="text-center">{% translate "Voir" %}</th>
          <th class="text-center">{% translate "Modifier" %}</th>
          <th class="text-center">{% translate "Supprimer" %}</th>
          <th>{% translate "Champs" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for ta in type_user_accesses %}
        <tr>
          <td>{{ ta.user_config.user.get_full_name|default:ta.user_config.user.username }}</td>
          <td class="text-center">
            {% if ta.can_view %}<i class="bi bi-check-circle-fill text-success"></i>
            {% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}
          </td>
          <td class="text-center">
            {% if ta.can_edit %}<i class="bi bi-check-circle-fill text-success"></i>
            {% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}
          </td>
          <td class="text-center">
            {% if ta.can_delete %}<i class="bi bi-check-circle-fill text-success"></i>
            {% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}
          </td>
          <td>
            {% if ta.editable_fields %}
              <small class="text-muted">{{ ta.editable_fields|join:", " }}</small>
            {% else %}
              <small class="text-muted fst-italic">{% translate "Par rôle" %}</small>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  <!-- Existing permissions table -->
  {% if accesses %}
  <table class="table table-sm table-hover align-middle mb-4">
    <thead class="table-light">
      <tr>
        <th>{% translate "Utilisateur" %}</th>
        <th class="text-center">{% translate "Voir" %}</th>
        <th class="text-center">{% translate "Modifier" %}</th>
        <th class="text-center">{% translate "Supprimer" %}</th>
        <th>{% translate "Champs visibles" %}</th>
        <th>{% translate "Champs modifiables" %}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for access in accesses %}
      <tr>
        <td>{{ access.user_config.user.get_full_name|default:access.user_config.user.username }}</td>
        <td class="text-center">
          {% if access.can_view %}
            <i class="bi bi-check-circle-fill text-success"></i>
          {% else %}
            <i class="bi bi-x-circle-fill text-danger"></i>
          {% endif %}
        </td>
        <td class="text-center">
          {% if access.can_edit %}
            <i class="bi bi-check-circle-fill text-success"></i>
          {% else %}
            <i class="bi bi-x-circle-fill text-danger"></i>
          {% endif %}
        </td>
        <td class="text-center">
          {% if access.can_delete %}
            <i class="bi bi-check-circle-fill text-success"></i>
          {% else %}
            <i class="bi bi-x-circle-fill text-danger"></i>
          {% endif %}
        </td>
        <td>
          {% if access.visible_fields %}
            <small class="text-muted">{{ access.visible_fields|join:", " }}</small>
          {% else %}
            <small class="text-muted fst-italic">{% translate "Tous" %}</small>
          {% endif %}
        </td>
        <td>
          {% if access.editable_fields %}
            <small class="text-muted">{{ access.editable_fields|join:", " }}</small>
          {% else %}
            <small class="text-muted fst-italic">{% translate "Par rôle" %}</small>
          {% endif %}
        </td>
        <td class="text-end">
          <a href="{% url 'assets:asset_access_edit' access.pk %}"
             class="btn btn-xs btn-outline-secondary btn-sm me-1">
            <i class="bi bi-pencil"></i>
          </a>
          <form method="post"
                action="{% url 'assets:asset_access_delete' access.pk %}"
                style="display:inline"
                onsubmit="return confirm('{% translate "Supprimer cet accès ?" %}')">
            {% csrf_token %}
            <button type="submit" class="btn btn-xs btn-outline-danger btn-sm">
              <i class="bi bi-trash"></i>
            </button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-muted fst-italic">{% translate "Aucun accès spécifique défini pour cet objet." %}</p>
  {% endif %}

  <!-- Add / update access form -->
  <div class="card border-0 bg-light">
    <div class="card-header bg-transparent fw-semibold">
      <i class="bi bi-person-plus me-1"></i>{% translate "Ajouter / mettre à jour un accès" %}
    </div>
    <div class="card-body">
      <form method="post"
            action="{% url 'assets:asset_permissions_panel' ct.pk object_id %}">
        {% csrf_token %}
        <div class="row g-3 align-items-start">

          <div class="col-md-4">
            <label class="form-label fw-semibold">{% translate "Utilisateur" %}</label>
            <select name="user_id" class="form-select form-select-sm" required>
              <option value="">— {% translate "choisir" %} —</option>
              {% for uc in all_user_configs %}
              <option value="{{ uc.user.pk }}">
                {{ uc.user.get_full_name|default:uc.user.username }}
              </option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label fw-semibold">{% translate "Droits" %}</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_view" id="new_can_view">
              <label class="form-check-label" for="new_can_view">{% translate "Voir" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_edit" id="new_can_edit">
              <label class="form-check-label" for="new_can_edit">{% translate "Modifier" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_delete" id="new_can_delete">
              <label class="form-check-label" for="new_can_delete">{% translate "Supprimer" %}</label>
            </div>
          </div>

          <div class="col-md-3"></div>

          <div class="col-md-6">
            <div class="d-flex align-items-center gap-1 mb-1">
              <label class="form-label fw-semibold mb-0 small">
                {% translate "Champs visibles" %}
                <span class="text-muted fw-normal">({% translate "vide = tous" %})</span>
              </label>
              <div class="ms-auto d-flex gap-1">
                <a href="#" class="small" onclick="toggleFields('panel-vf', true); return false;">{% translate "Tous" %}</a>
                <span class="text-muted small">|</span>
                <a href="#" class="small" onclick="toggleFields('panel-vf', false); return false;">{% translate "Aucun" %}</a>
              </div>
            </div>
            <div id="panel-vf" class="border rounded p-2 bg-white" style="max-height:180px;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="new_vf_{{ value }}">
                <label class="form-check-label small" for="new_vf_{{ value }}">{{ label }}</label>
              </div>
              {% empty %}
              <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
              {% endfor %}
            </div>
          </div>

          <div class="col-md-6">
            <div class="d-flex align-items-center gap-1 mb-1">
              <label class="form-label fw-semibold mb-0 small">
                {% translate "Champs modifiables" %}
                <span class="text-muted fw-normal">({% translate "vide = rôle" %})</span>
              </label>
              <div class="ms-auto d-flex gap-1">
                <a href="#" class="small" onclick="toggleFields('panel-ef', true); return false;">{% translate "Tous" %}</a>
                <span class="text-muted small">|</span>
                <a href="#" class="small" onclick="toggleFields('panel-ef', false); return false;">{% translate "Aucun" %}</a>
              </div>
            </div>
            <div id="panel-ef" class="border rounded p-2 bg-white" style="max-height:180px;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="new_ef_{{ value }}">
                <label class="form-check-label small" for="new_ef_{{ value }}">{{ label }}</label>
              </div>
              {% empty %}
              <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
              {% endfor %}
            </div>
          </div>

          

        </div>
        <div class="mt-3">
          <button type="submit" class="btn btn-sm btn-primary">
            <i class="bi bi-save me-1"></i>{% translate "Enregistrer" %}
          </button>
        </div>
      </form>
    </div>
  </div>

</div>

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