{% extends "base.html" %}
{% block title %}Permissions{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/permission.css') }}" />

<div class="permission-container mt-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2>Permission Management</h2>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPermissionModal">
      <i class="bi bi-plus-circle"></i> Add Permission
    </button>
  </div>

  <div class="shadow-sm card-1">
    <div class="card-body">
      <table class="table table-hover align-middle table-custom">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for permission in permissions %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>{{ permission.name }}</td>
            <td>{{ permission.description or 'N/A' }}</td>
            <td>
              <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <i class="bx bx-dots-horizontal-rounded"></i>
                </button>
                <ul class="dropdown-menu card-1">
                  <li>
                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editPermissionModal{{ permission.id }}">
                      <i class="bx bx-edit"></i> Edit
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deletePermissionModal{{ permission.id }}">
                      <i class="bx bx-trash"></i> Delete
                    </a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>

          <!-- Edit Permission Modal -->
          <div class="modal fade" id="editPermissionModal{{ permission.id }}" tabindex="-1">
            <div class="modal-dialog">
              <form method="POST" action="{{ url_for('permissions.update', permission_id=permission.id, page=pagination.page) }}">
                <div class="modal-content">
                  <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white">Edit Permission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                  </div>
                  <div class="modal-body">
                    <div class="mb-3">
                      <label class="form-label">Permission Name</label>
                      <input type="text" class="form-control" name="name" value="{{ permission.name }}" required>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">Description</label>
                      <textarea class="form-control" name="description" rows="4">{{ permission.description or '' }}</textarea>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn bg-primary text-white" type="submit">Update</button>
                  </div>
                </div>
              </form>
            </div>
          </div>

          <!-- Delete Permission Modal -->
          <div class="modal fade" id="deletePermissionModal{{ permission.id }}" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                  <h5 class="modal-title"><i class="bx bx-trash"></i> Confirm Delete</h5>
                  <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  Are you sure you want to delete permission <strong>{{ permission.name }}</strong>?
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <form action="{{ url_for('permissions.delete', permission_id=permission.id, page=pagination.page) }}" method="POST" class="d-inline">
                    <button type="submit" class="btn btn-danger">Delete</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <!-- Pagination Controls -->
    <div class="d-flex justify-content-center mt-3">
      <nav>
        <ul class="pagination">
          {% if pagination.has_prev %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('permissions.index', page=pagination.prev_num) }}">Previous</a>
          </li>
          {% else %}
          <li class="page-item disabled">
            <span class="page-link">Previous</span>
          </li>
          {% endif %}
          {% for page_num in pagination.iter_pages() %}
          {% if page_num %}
          <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
            <a class="page-link" href="{{ url_for('permissions.index', page=page_num) }}">{{ page_num }}</a>
          </li>
          {% else %}
          <li class="page-item disabled">
            <span class="page-link">...</span>
          </li>
          {% endif %}
          {% endfor %}
          {% if pagination.has_next %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('permissions.index', page=pagination.next_num) }}">Next</a>
          </li>
          {% else %}
          <li class="page-item disabled">
            <span class="page-link">Next</span>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
  </div>
</div>

<!-- Create Permission Modal -->
<div class="modal fade" id="createPermissionModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" action="{{ url_for('permissions.create', page=pagination.page) }}">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-white">Add Permission</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Permission Name</label>
            <input type="text" class="form-control" name="name" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea class="form-control" name="description" rows="4"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" type="submit">Create</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Boxicons CDN -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
{% endblock %}