{% load common_tags %}
{% load i18n %}
<div class="page-content" id="employees-page">
{{ pharmacies_by_org|json_script:"emp-pharmacies-data" }}

    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Сотрудники" %}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{% trans "Управление персоналом компании" %}</p>
        </div>
        <button class="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/>
            </svg>
            {% trans "Добавить сотрудника" %}
        </button>
    </div>

    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0 / 0.05);">

        <!-- Заголовок карточки -->
        <div style="padding:1.25rem 1.5rem; border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; gap:1rem;">
            <div>
                <h3 style="font-weight:600; color:var(--color-card-foreground); font-size:0.9375rem;">{% trans "Сотрудники" %}</h3>
                <p style="font-size:0.8125rem; color:var(--color-muted-foreground); margin-top:0.125rem;">{{ total_count }} {% trans "сотрудников, из них" %} {{ active_count }} {% trans "активных" %}</p>
            </div>
            <!-- Поиск по таблице -->
            <div style="display:flex; align-items:center; gap:0.5rem; background:var(--color-muted); border:1px solid var(--color-border); border-radius:var(--radius); padding:0.375rem 0.75rem; width:16rem;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--color-muted-foreground); flex-shrink:0;">
                    <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                </svg>
                <input type="text" placeholder="{% trans 'Поиск...' %}" class="input" style="border:none; background:transparent; padding:0; box-shadow:none; font-size:0.8125rem;">
            </div>
        </div>

        <!-- Фільтри -->
        <div style="padding:0.875rem 1.5rem; border-bottom:1px solid var(--color-border);">
            <div style="display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;">

                <!-- Перемикач типу локації -->
                <div style="display:flex; gap:0.25rem; background:var(--color-muted); border-radius:var(--radius); padding:0.25rem;">
                    <a href="#"
                       hx-get="/employees/"
                       hx-target="#main-content"
                       hx-push-url="/employees/"
                       hx-indicator="#loader"
                       style="display:inline-flex;align-items:center;padding:0.25rem 0.875rem;font-size:0.8125rem;border-radius:calc(var(--radius) - 2px);font-weight:500;text-decoration:none;cursor:pointer;transition:all 150ms;
                       {% if not filter_location_type %}background:var(--color-card);color:var(--color-card-foreground);box-shadow:0 1px 2px rgb(0 0 0/0.08);{% else %}color:var(--color-muted-foreground);{% endif %}">{% trans "Все" %}</a>

                    <a href="#"
                       hx-get="/employees/?location_type=office"
                       hx-target="#main-content"
                       hx-push-url="/employees/?location_type=office"
                       hx-indicator="#loader"
                       style="display:inline-flex;align-items:center;padding:0.25rem 0.875rem;font-size:0.8125rem;border-radius:calc(var(--radius) - 2px);font-weight:500;text-decoration:none;cursor:pointer;transition:all 150ms;
                       {% if filter_location_type == 'office' %}background:var(--color-card);color:var(--color-card-foreground);box-shadow:0 1px 2px rgb(0 0 0/0.08);{% else %}color:var(--color-muted-foreground);{% endif %}">{% trans "Офис" %}</a>

                    <a href="#"
                       hx-get="/employees/?location_type=pharmacy"
                       hx-target="#main-content"
                       hx-push-url="/employees/?location_type=pharmacy"
                       hx-indicator="#loader"
                       style="display:inline-flex;align-items:center;padding:0.25rem 0.875rem;font-size:0.8125rem;border-radius:calc(var(--radius) - 2px);font-weight:500;text-decoration:none;cursor:pointer;transition:all 150ms;
                       {% if filter_location_type == 'pharmacy' %}background:var(--color-card);color:var(--color-card-foreground);box-shadow:0 1px 2px rgb(0 0 0/0.08);{% else %}color:var(--color-muted-foreground);{% endif %}">{% trans "Аптека" %}</a>
                </div>

                {% if filter_location_type == 'pharmacy' %}
                <!-- Вибір підприємства -->
                <select id="emp-org-select"
                        class="input"
                        style="font-size:0.8125rem;padding:0.3rem 0.75rem;height:auto;min-width:12rem;"
                        onchange="empOrgChange()">
                    <option value="">{% trans "Все предприятия" %}</option>
                    {% for org in organizations %}
                    <option value="{{ org.id }}"
                        {% if org.id|stringformat:"d" == filter_organization_id %}selected{% endif %}
                    >{{ org.name }}</option>
                    {% endfor %}
                </select>

                <!-- Вибір аптеки -->
                <select id="emp-pharma-select"
                        class="input"
                        style="font-size:0.8125rem;padding:0.3rem 0.75rem;height:auto;min-width:14rem;"
                        onchange="empPharmaChange()">
                    <option value="">{% trans "Все аптеки" %}</option>
                    {% for pharmacy in current_pharmacies %}
                    <option value="{{ pharmacy.id }}"
                        {% if pharmacy.id|stringformat:"d" == filter_pharmacy_id %}selected{% endif %}
                    >{% trans "Аптека" %} №{{ pharmacy.pharmacy_number }} — {{ pharmacy.address }}</option>
                    {% endfor %}
                </select>
                {% endif %}

            </div>
        </div>

        <!-- Таблица -->
        <div style="overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; font-size:0.875rem;">
                <thead>
                    <tr style="border-bottom:1px solid var(--color-border);">
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Сотрудник" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Должность" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Отдел / Аптека" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Адрес" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Статус" %}</th>
                        <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600; font-size:0.8125rem;">{% trans "Дата начала" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for employee in employees %}
                    <tr style="border-bottom:1px solid var(--color-border); cursor:pointer; transition:background 150ms;" class="tr-hover"
                        hx-get="/employees/{{ employee.pk }}/" hx-target="#main-content" hx-push-url="/employees/{{ employee.pk }}/" hx-indicator="#loader">
                        <td style="padding:1rem; vertical-align:middle;">
                            <div style="display:flex; align-items:center; gap:0.75rem;">
                                {% if employee.photo %}
                                <img src="{{ employee.photo.url }}" alt="Фото {{ employee.last_name }} {{ employee.first_name }}" style="width:2rem; height:2rem; border-radius:50%; object-fit:cover; display:block;" />
                                {% else %}
                                <span style="width:2rem; height:2rem; border-radius:50%; background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:0.6875rem; font-weight:500; flex-shrink:0;">
                                    {{ employee|initials }}
                                </span>
                                {% endif %}
                                <span style="font-weight:500; color:var(--color-card-foreground);">{{ employee.last_name }} {{ employee.first_name }}{% if employee.middle_name %} {{ employee.middle_name }}{% endif %}</span>
                            </div>
                        </td>
                        <td style="padding:1rem; vertical-align:middle; color:var(--color-muted-foreground);">
                            {% if employee.post %}
                                {{ employee.post.name }}
                            {% else %}
                                {{ employee.groups.first.name|default:"-" }}
                            {% endif %}
                        </td>
                        <td style="padding:1rem; vertical-align:middle; color:var(--color-muted-foreground);">
                            {% if employee.department %}{{ employee.department.name }}{% elif employee.user_pharmacy %}{{ employee.user_pharmacy.name }}{% else %}-{% endif %}
                        </td>
                        <td style="padding:1rem; vertical-align:middle; color:var(--color-muted-foreground);">
                            {% if employee.user_pharmacy %}
                                {{ employee.user_pharmacy.address }}
                            {% elif employee.department %}
                                {% if employee.user_organization %}{{ employee.user_organization.name }}{% else %}-{% endif %}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td style="padding:1rem; vertical-align:middle;">
                            {% if employee.is_active %}
                            <span class="badge badge-success">{% trans "Активный" %}</span>
                            {% else %}
                            <span class="badge badge-danger">{% trans "Не активный" %}</span>
                            {% endif %}
                            {% if employee.employment_type == 'contract' %}
                            <span class="badge badge-muted">{% trans "По договору" %}</span>
                            {% endif %}
                        </td>
                        <td style="padding:1rem; vertical-align:middle; color:var(--color-muted-foreground);">{{ employee.hire_date|date:"d.m.Y" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" style="padding:1.25rem; text-align:center; color:var(--color-muted-foreground);">{% trans "Список сотрудников пуст." %}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% include "partials/pagination.html" with page=page base_url="/employees/" page_param="page" size_param="per_page" item_label="співробітників" %}

    </div>
</div>