{% extends 'layouts/base.twig' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-0">{{ title }}</h1>
    </div>
    <a href="{{ site_url('/crm/contacts/create') }}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-2"></i>Добавить контакт
    </a>
</div>

{# Сообщения #}
{% if success is defined %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ success }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<div class="card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="bg-light">
                    <tr>
                        <th>Имя</th>
                        <th>Email</th>
                        <th>Телефон</th>
                        <th>Должность</th>
                        <th>Клиент</th>
                        <th class="text-end" style="width: 120px;">Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contact in contacts %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
                                     style="width: 32px; height: 32px; min-width: 32px;">
                                    <span class="text-white small">{{ contact.name|slice(0, 2)|upper }}</span>
                                </div>
                                <span class="fw-medium">{{ contact.name }}</span>
                                {% if contact.is_primary %}
                                <span class="badge bg-success" style="font-size: 0.7rem;">Основной</span>
                                {% endif %}
                            </div>
                        </td>
                        <td>{{ contact.email ?: '—' }}</td>
                        <td>{{ contact.phone ?: '—' }}</td>
                        <td>{{ contact.position ?: '—' }}</td>
                        <td>
                            {% if contact.customer_id %}
                            <span class="text-muted">{{ contact.customer_id }}</span>
                            {% else %}
                            <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            <a href="{{ site_url('/crm/contacts/' ~ contact.id ~ '/edit') }}" 
                               class="btn btn-outline-primary btn-sm" title="Редактировать">
                                <i class="fa-solid fa-pen"></i>
                            </a>
                            <form action="{{ site_url('/crm/contacts/' ~ contact.id) }}" method="POST" class="d-inline">
                                {{ csrf_field()|raw }}
                                <input type="hidden" name="_method" value="DELETE">
                                <button type="submit" class="btn btn-outline-danger btn-sm"
                                        onclick="return confirm('Удалить контакт?')" title="Удалить">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">
                            Контактов пока нет
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}