{# CODEX_DJANGO_CLI BLUEPRINT STATUS: MOVE_TO_CLI_BLUEPRINT. Reason: generated app-layer or scaffold-owned template for codex-django-cli blueprints. #}
{% extends "cabinet/base_cabinet.html" %}
{% load i18n %}

{% block title %}{% trans "Inbox" %}{% endblock %}

{% block cabinet_content %}
<div class="px-3 py-4" style="max-width:1400px; min-width:600px; background-color:#f8fafc; min-height:calc(100vh - 100px); border-radius:16px;">

    {# ── Search bar & Check ── #}
    <div class="d-flex align-items-center gap-3 mb-3 p-2" style="background:#f8fafc; border-radius:12px; border:1px solid #e2e8f0;">
        <div class="flex-grow-1 position-relative">
            <span class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3" style="color:#94a3b8;"></span>
            <input type="text" class="form-control border-0 shadow-none ps-5"
                   placeholder="{% trans "Поиск сообщений..." %}"
                   style="background:transparent; font-size:.9rem;">
        </div>
        <form method="post" action="{% url 'cabinet:conversations_check_inbox' %}" class="d-inline">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-light border d-flex align-items-center gap-1" style="font-size:.82rem;">
                <span class="bi bi-arrow-clockwise"></span>{% trans "Проверить почту" %}
            </button>
        </form>
    </div>

    <form method="post" action="{% url 'cabinet:conversations_bulk_action' %}">
        {% csrf_token %}
        <input type="hidden" name="folder" value="{{ active_folder }}">
        <input type="hidden" name="topic" value="{{ active_topic }}">
        <div class="d-flex flex-wrap gap-2 mb-3">
            <button type="submit" name="action" value="mark_read" class="btn btn-sm btn-light border">{% trans "Mark read" %}</button>
            <button type="submit" name="action" value="mark_unread" class="btn btn-sm btn-light border">{% trans "Mark unread" %}</button>
            <button type="submit" name="action" value="mark_processed" class="btn btn-sm btn-light border">{% trans "Mark processed" %}</button>
            <button type="submit" name="action" value="mark_spam" class="btn btn-sm btn-light border">{% trans "Spam" %}</button>
            <button type="submit" name="action" value="archive" class="btn btn-sm btn-light border">{% trans "Archive" %}</button>
        </div>

    {# ── Topic Filter Pills ── #}
    {% if topics %}
    <div class="d-flex flex-wrap gap-1 mb-3">
        <a href="?folder={{ active_folder }}"
           class="badge px-3 py-2 text-decoration-none"
           style="background:{% if not active_topic %}rgba(99, 102, 241, 0.1){% else %}transparent{% endif %};
                  color:{% if not active_topic %}var(--cab-primary){% else %}var(--cab-text-muted){% endif %};
                  border: 1px solid {% if not active_topic %}var(--cab-primary){% else %}#e2e8f0{% endif %};
                  font-size: .75rem; border-radius: 20px;">
            {% trans "Все" %}
        </a>
        {% for item in topics %}
        <a href="?folder={{ active_folder }}&topic={{ item.topic }}"
           class="badge px-3 py-2 text-decoration-none"
           style="background:{% if active_topic == item.topic %}rgba(99, 102, 241, 0.1){% else %}transparent{% endif %};
                  color:{% if active_topic == item.topic %}var(--cab-primary){% else %}var(--cab-text-muted){% endif %};
                  border: 1px solid {% if active_topic == item.topic %}var(--cab-primary){% else %}#e2e8f0{% endif %};
                  font-size: .75rem; border-radius: 20px;">
            {{ item.topic|capfirst }} ({{ item.count }})
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {# ── Message List (Gmail-like thin rows) ── #}
    {% if page_obj.object_list %}
    <div class="card shadow-sm border-0" style="border-radius:12px; overflow:hidden;">
        {% for msg in messages %}
        <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom email-row"
             style="background:{% if not msg.is_read %}#f8fbff{% else %}#fff{% endif %}; transition: background 0.15s; min-height: 52px;">

            <div class="form-check m-0">
                <input class="form-check-input" type="checkbox" name="message_ids" value="{{ msg.pk }}">
            </div>

            {# 1. Avatar #}
            <div style="width:32px; flex-shrink:0;">
                {% include "cabinet/includes/_avatar.html" with initials=msg.sender_name|first|upper color="var(--cab-primary)" size="32px" font_size=".75rem" %}
            </div>

            {# 2. Sender Name #}
            <a href="{% url 'cabinet:conversations_thread' msg.pk %}"
               class="fw-bold text-truncate text-decoration-none"
               style="color:#1e293b; font-size:.88rem; min-width:140px; max-width: 180px; flex-shrink:0;">
                {{ msg.sender_name }}
            </a>

            {# 3. Subject + Body Snippet #}
            <a href="{% url 'cabinet:conversations_thread' msg.pk %}"
               class="flex-grow-1 text-truncate text-decoration-none"
               style="color:#475569; font-size:.85rem;">
                <span class="fw-semibold text-dark">{{ msg.subject|default:"(Без темы)" }}</span>
                <span class="text-muted mx-1">—</span>
                <span class="text-muted">{{ msg.body|truncatechars:150 }}</span>
            </a>

            {# 4. Badges (Status/Topic) #}
            <div class="d-flex gap-1 flex-shrink-0">
                {% if not msg.is_read %}
                    <span class="badge" style="background:#fff7ed; color:#c2410c; border:1px solid #fdba74; font-size:.7rem;">{% trans "Unread" %}</span>
                {% endif %}
                {% if msg.status == 'open' %}
                    <span class="badge" style="background:#f5f3ff; color:#6366f1; border:1px solid #c7d2fe; font-size:.7rem;">{% trans "Открыто" %}</span>
                {% elif msg.status == 'processed' %}
                    <span class="badge" style="background:#dcfce7; color:#166534; border:1px solid #86efac; font-size:.7rem;">{% trans "Processed" %}</span>
                {% elif msg.status == 'spam' %}
                    <span class="badge" style="background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; font-size:.7rem;">{% trans "Spam" %}</span>
                {% endif %}
            </div>

            {# 5. Date #}
            <div class="text-end" style="color:#94a3b8; font-size:.78rem; width:100px; flex-shrink:0;">
                {% if msg.created_at.date == today %}
                    {{ msg.created_at|date:"H:i" }}
                {% else %}
                    {{ msg.created_at|date:"d M H:i" }}
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    {# ── Pagination ── #}
    {% if page_obj.has_other_pages %}
    <div class="d-flex justify-content-center mt-4">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-sm shadow-sm" style="border-radius:10px; overflow:hidden;">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link border-0 px-3" href="?page={{ page_obj.previous_page_number }}{% if active_folder %}&folder={{ active_folder }}{% endif %}{% if active_topic %}&topic={{ active_topic }}{% endif %}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active"><span class="page-link border-0 px-3" style="background:var(--cab-primary); border-color:var(--cab-primary);">{{ num }}</span></li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item"><a class="page-link border-0 px-3 text-dark" href="?page={{ num }}{% if active_folder %}&folder={{ active_folder }}{% endif %}{% if active_topic %}&topic={{ active_topic }}{% endif %}">{{ num }}</a></li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link border-0 px-3" href="?page={{ page_obj.next_page_number }}{% if active_folder %}&folder={{ active_folder }}{% endif %}{% if active_topic %}&topic={{ active_topic }}{% endif %}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}

    {% else %}
        {% include "cabinet/includes/_empty_state.html" with icon="bi-inbox" title="Входящие пусты" subtitle="В этом разделе нет сообщений." %}
    {% endif %}
    </form>

</div>

<style>
.email-row:hover { background: #f8fafc !important; }
.email-row:hover .text-dark { color: var(--cab-primary) !important; }
</style>
{% endblock %}