{% extends "pos/base.html" %}
{% load static %}

{% block title %}User Departments{% endblock %}

{% block content %}
<div class="bp-page">

  {% if messages %}
    {% for message in messages %}
      <div class="bp-alert bp-alert-{{ message.tags }}">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <div class="bp-card">
    <div class="bp-card-head">
      <div>
        <h2>User Departments</h2>
        <p>Kitchen users ko multiple departments ke sath attach karein.</p>
      </div>
    </div>

    <div class="table-wrap">
      <table class="bp-table">
        <thead>
          <tr>
            <th style="width:70px;">ID</th>
            <th>User</th>
            <th>Departments</th>
            <th style="width:100px;">Count</th>
            <th style="width:100px;">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for row in rows %}
            <tr>
              <td class="font-strong">{{ row.user.id }}</td>

              <td>
                <strong>{{ row.user.username }}</strong>

                {% if row.user.email %}
                  <div class="muted">{{ row.user.email }}</div>
                {% endif %}

                {% if row.user.is_superuser %}
                  <span class="super-pill">Superuser</span>
                {% endif %}
              </td>

              <td>
                {% if row.departments %}
                  <div class="dept-list">
                    {% for dept in row.departments %}
                      <span class="dept-pill">{{ dept.name }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  {% if row.user.is_superuser %}
                    <span class="all-pill">All Departments</span>
                  {% else %}
                    <span class="missing-pill">No Department Assigned</span>
                  {% endif %}
                {% endif %}
              </td>

              <td>
                {% if row.user.is_superuser %}
                  <span class="count-pill">All</span>
                {% else %}
                  <span class="count-pill">{{ row.department_count }}</span>
                {% endif %}
              </td>

              <td>
                <a class="bp-btn tiny" href="{% url 'restaurant:user_departments:edit' row.user.id %}">
                  Edit
                </a>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="5" class="empty-row">No active users found.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  .bp-page {
    padding: 12px;
  }

  .bp-alert {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
  }

  .bp-alert-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #087443;
  }

  .bp-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
  }

  .bp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .bp-card-head h2 {
    margin: 0;
    color: #01478f;
    font-size: 22px;
    font-weight: 900;
  }

  .bp-card-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
  }

  .table-wrap {
    overflow: auto;
  }

  .bp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .bp-table th {
    background: #f8fafc;
    color: #334155;
    text-align: left;
    padding: 9px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
  }

  .bp-table td {
    padding: 9px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
  }

  .font-strong {
    font-weight: 900;
    color: #0f172a;
  }

  .muted {
    color: #64748b;
    font-size: 11px;
    margin-top: 2px;
  }

  .dept-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .dept-pill {
    background: #ecfdf5;
    color: #087443;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    display: inline-flex;
  }

  .missing-pill {
    background: #fff7ed;
    color: #c2410c;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    display: inline-flex;
  }

  .all-pill {
    background: #eff6ff;
    color: #01478f;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    display: inline-flex;
  }

  .super-pill {
    margin-top: 4px;
    background: #eef2ff;
    color: #4338ca;
    padding: 4px 7px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    display: inline-flex;
  }

  .count-pill {
    background: #e8f1fb;
    color: #01478f;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    display: inline-flex;
  }

  .bp-btn {
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
  }

  .bp-btn.tiny {
    padding: 6px 9px;
    font-size: 12px;
    background: #e8f1fb;
    color: #01478f;
  }

  .empty-row {
    text-align: center;
    color: #64748b;
    font-weight: 800;
    padding: 25px;
  }
</style>
{% endblock %}