{% load i18n telephony %}
<div class="page-content">
    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;">
        <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>
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
            <a href="{% url 'phonebook' %}" hx-get="{% url 'phonebook' %}" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
               class="btn {% if tab != 'missed' %}btn-primary{% else %}btn-ghost{% endif %}">{% trans "Книга" %}</a>
            <a href="{% url 'phonebook' %}?tab=missed" hx-get="{% url 'phonebook' %}?tab=missed" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
               class="btn {% if tab == 'missed' %}btn-primary{% else %}btn-ghost{% endif %}">
                {% trans "Пропущенные" %}{% if missed_unread %} · {{ missed_unread }}{% endif %}
            </a>
        </div>
    </div>

    {% if tab == 'missed' %}
    <div style="display:flex; justify-content:flex-end; margin-bottom:0.75rem;">
        <form hx-post="{% url 'telephony_missed_seen' %}" hx-target="#main-content" hx-indicator="#loader">
            <button type="submit" class="btn btn-ghost" style="font-size:0.8125rem;">{% trans "Отметить просмотренными" %}</button>
        </form>
    </div>
    <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; overflow: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;">{% trans "Когда" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Кто" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Куда" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Итог" %}</th>
                    <th style="padding:0.75rem 1rem;"></th>
                </tr>
            </thead>
            <tbody>
                {% for call in missed_calls %}
                <tr style="border-bottom:1px solid var(--color-border); {% if not call.seen_at %}background:color-mix(in srgb, var(--color-primary) 8%, transparent);{% endif %}">
                    <td style="padding:0.625rem 1rem; white-space:nowrap;">{{ call.occurred_at|date:"d.m.Y H:i" }}</td>
                    <td style="padding:0.625rem 1rem;">{{ call.src }}</td>
                    <td style="padding:0.625rem 1rem;">{{ call.dst }}</td>
                    <td style="padding:0.625rem 1rem;">{{ call.get_disposition_display }}</td>
                    <td style="padding:0.625rem 1rem;">
                        <button type="button" class="btn btn-ghost" style="font-size:0.8125rem; font-weight:600;"
                                hx-post="{% url 'telephony_call' %}"
                                hx-vals='{"dest": "number", "phone": "{{ call.src }}"}'
                                hx-swap="none" hx-indicator="#loader">
                            {% trans "Перезвонить" %}
                        </button>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" style="padding:2rem; text-align:center; color:var(--color-muted-foreground);">
                        {% trans "Пропущенных пока нет. Слушатель AMI: python manage.py listen_ami" %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <form method="get" action="{% url 'phonebook' %}"
          hx-get="{% url 'phonebook' %}" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
          style="margin-bottom:1rem; display:flex; gap:0.5rem; max-width:36rem;">
        <input type="search" name="q" value="{{ query }}" class="input" style="flex:1;"
               placeholder="{% trans 'Фамилия, внутренний, +380…' %}">
        <button type="submit" class="btn btn-primary">{% trans "Найти" %}</button>
    </form>

    {% if can_add_contact %}
    <form hx-post="{% url 'phonebook' %}" hx-target="#main-content" hx-indicator="#loader"
          style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:0.875rem 1rem; margin-bottom:1rem; display:flex; gap:0.5rem; flex-wrap:wrap; align-items:end;">
        <div style="flex:1; min-width:10rem;">
            <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Имя" %}</label>
            <input type="text" name="name" class="input" required>
        </div>
        <div style="flex:1; min-width:10rem;">
            <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Телефон" %}</label>
            <input type="tel" name="phone" class="input js-phone" required>
        </div>
        <div style="flex:1; min-width:8rem;">
            <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Заметка" %}</label>
            <input type="text" name="notes" class="input">
        </div>
        <button type="submit" class="btn btn-secondary">{% trans "Добавить" %}</button>
    </form>
    {% endif %}

    {% for group, rows in groups %}
    <h2 style="font-size:0.875rem; font-weight:600; margin:1.25rem 0 0.5rem;">{{ group }}</h2>
    <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; overflow:auto; margin-bottom:0.75rem;">
        <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;">{% trans "Имя" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Где" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Внутр." %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Рабочий" %}</th>
                    <th style="padding:0.75rem 1rem; text-align:left; color:var(--color-muted-foreground); font-weight:600;">{% trans "Личный" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr class="tr-hover" style="border-bottom:1px solid var(--color-border);">
                    <td style="padding:0.625rem 1rem; font-weight:500;">
                        {% if row.employee %}
                        <a href="/employees/{{ row.employee.pk }}/" hx-get="/employees/{{ row.employee.pk }}/" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
                           style="color:inherit; text-decoration:none;">{{ row.name }}</a>
                        {% else %}
                        {{ row.name }}
                        {% endif %}
                    </td>
                    <td style="padding:0.625rem 1rem; color:var(--color-muted-foreground);">{{ row.place|default:"—" }}</td>
                    <td style="padding:0.625rem 1rem;">{% if row.employee %}{% internal_number_cell row.employee %}{% else %}—{% endif %}</td>
                    <td style="padding:0.625rem 1rem;">
                        {% if row.employee %}
                            {% phone_cell row.employee %}
                        {% elif row.phone %}
                            <button type="button" class="btn btn-ghost" style="padding:0.125rem 0.375rem; font-size:0.8125rem; font-weight:600;"
                                    hx-post="{% url 'telephony_call' %}"
                                    hx-vals='{"dest": "number", "phone": "{{ row.phone }}"}'
                                    hx-swap="none" hx-indicator="#loader">{{ row.phone }}</button>
                        {% else %}—{% endif %}
                    </td>
                    <td style="padding:0.625rem 1rem;">
                        {% if row.employee %}
                            {% phone_cell row.employee field='personal_phone' %}
                        {% else %}—{% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% empty %}
    <div style="padding:2rem; text-align:center; color:var(--color-muted-foreground);">{% trans "Никого не найдено" %}</div>
    {% endfor %}
    {% endif %}
</div>