{% extends 'layout.html' %}

{% set title = 'Contacts | Contact Manager' %}
{% set css = 'contacts.css' %}

{% block content %}
    <div class="logout-container">
        <a href="{{ url_for('logout')}}" class="btn-logout">Logout</a>
    </div>

    <div class="contacts-container">
        <h3 class="contacts-title">My Contacts</h3>

        <div class="search-actions">
            <form action="{{ url_for('search_contacts') }}" method="get" class="search-form">
                <input type="text" class="search-input" name="query" placeholder="Search by name, lastname, phone, email..." required>
                <button type="submit" class="btn btn-search">Search</button>
            </form>

            <form action="{{ url_for('contacts') }}" class="reset-form">
                <button type="submit" class="btn btn-reset">Reset</button>
            </form>
            <a href="{{ url_for('add_contact') }}" class="btn btn-add">Add new</a>
        </div>

        <table class="contacts-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Lastname</th>
                    <th>Phones</th>
                    <th>Category</th>
                    <th>Address</th>
                    <th>Email</th>
                    <th>Favorite</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                {% for contact in contacts %}
                    <tr>
                       <td>
                            {{ contact.name }}
                        </td>
                        <td>
                            {{ contact.lastname or '-' }} 
                        </td>
                        <td>
                            {{ contact.phones|join(' - ') }}
                        </td>
                        <td>
                            {{ contact.category }}
                        </td>
                        <td>
                            {{ contact.address or '-' }} 
                        </td>
                        <td>
                            {{ contact.email or '-' }}
                        </td>
                        <td>
                            {% if contact.is_favorite %} Yes {% else %} No {% endif %}
                        </td>
                        <td>
                            <div class="actions">
                                <a href="{{ url_for('update_contact', contact_id = contact.id) }}" class="btn-edit">Edit</a>
                                <form action="{{ url_for('delete_contact') }}" method="post" class="delete-form">
                                    <input type="hidden" name="contact_id" value="{{ contact.id }}">
                                    <button type="submit" class="btn-delete">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="alert-container">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert {{ category }}">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
    </div>

{% endblock %}