{% extends 'base.html' %}
{% load static %}
{% block title %}Каталог — Sharp Cut{% endblock %}
{% block content %}
<section class="container py-4">
    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-4 fade-up">
        <div>
            <h1 class="display-6 fw-bold mb-2">Услуги и мастера</h1>
        </div>
        <div class="align-self-lg-end">
            {% if user.is_authenticated %}
                <a class="btn btn-dark rounded-pill px-4" href="{% url 'appointment_create' %}">Оформить запись</a>
            {% else %}
                <a class="btn btn-outline-dark rounded-pill px-4" href="{% url 'login' %}">Войти для записи</a>
            {% endif %}
        </div>
    </div>

    <div class="d-flex flex-wrap align-items-center justify-content-between bg-white rounded-5 shadow-sm p-3 p-md-4 my-4 fade-up">
        <div class="filter-group d-flex flex-wrap gap-2">
            <a href="?{% if query %}q={{ query }}&{% endif %}available=" class="btn btn-outline-dark rounded-pill {% if not availability %}active{% endif %}">Все</a>
            <a href="?{% if query %}q={{ query }}&{% endif %}available=1" class="btn btn-outline-dark rounded-pill {% if availability == '1' %}active{% endif %}">Доступные</a>
        </div>
        <form method="get" class="d-flex gap-2">
            <label>
                <input class="form-control rounded-pill" type="search" name="q" value="{{ query }}" placeholder="Поиск услуги...">
            </label>
            <button class="btn btn-dark rounded-pill" type="submit">Найти</button>
        </form>
    </div>

    <h2 class="h3 fw-bold mb-3 fade-up">Услуги</h2>
    <div class="row g-4 mb-5">
        {% for service in services %}
            <div class="col-12 col-md-6 col-xl-4 fade-up">
                <article class="card card-sharp border-0 shadow-sm rounded-5 h-100">
                    <div class="card-body p-4 d-flex flex-column">
                        <div class="d-flex justify-content-between gap-2 mb-3">
                            <h3 class="h5 fw-bold mb-0">{{ service.name }}</h3>
                            {% if service.is_available %}
                                <span class="badge text-bg-success rounded-pill align-self-start">Доступна</span>
                            {% else %}
                                <span class="badge text-bg-secondary rounded-pill align-self-start">Недоступна</span>
                            {% endif %}
                        </div>
                        <p class="text-muted flex-grow-1">{{ service.description }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-bold fs-5">{{ service.price }} ₽</div>
                                <div class="text-muted small">{{ service.duration }} минут</div>
                            </div>
                            {% if service.is_available and user.is_authenticated %}
                                <a class="btn btn-outline-dark rounded-pill" href="{% url 'appointment_create' %}?service={{ service.id }}">Записаться</a>
                            {% elif service.is_available %}
                                <a class="btn btn-outline-dark rounded-pill" href="{% url 'login' %}">Войти</a>
                            {% else %}
                                <button class="btn btn-outline-secondary rounded-pill" disabled>Недоступна</button>
                            {% endif %}
                        </div>
                    </div>
                </article>
            </div>
        {% empty %}
            <div class="col-12"><div class="alert alert-info rounded-4">Услуги не найдены.</div></div>
        {% endfor %}
    </div>

    <div class="d-flex flex-wrap align-items-center justify-content-between bg-white rounded-5 shadow-sm p-3 p-md-4 my-4 fade-up">
        <div class="filter-group d-flex flex-wrap gap-2">
            <a href="?{% if query %}q={{ query }}&{% endif %}master_available=1{% if master_search %}&master_search={{ master_search }}{% endif %}"
               class="btn btn-outline-dark rounded-pill {% if master_available == '1' or master_available is None %}active{% endif %}">Активные</a>
            <a href="?{% if query %}q={{ query }}&{% endif %}master_available=0{% if master_search %}&master_search={{ master_search }}{% endif %}"
               class="btn btn-outline-dark rounded-pill {% if master_available == '0' %}active{% endif %}">Неактивные</a>
        </div>
        <form method="get" class="d-flex gap-2">
            {% if query %}<input type="hidden" name="q" value="{{ query }}">{% endif %}
            {% if availability %}<input type="hidden" name="available" value="{{ availability }}">{% endif %}
            <label>
                <input class="form-control rounded-pill" type="search" name="master_search" value="{{ master_search }}" placeholder="Поиск мастера...">
            </label>
            <button class="btn btn-dark rounded-pill" type="submit">Найти</button>
        </form>
    </div>

    <h2 class="h3 fw-bold mb-3 fade-up">Мастера</h2>
    <div class="row g-4 mb-5">
        {% for master in masters %}
            <div class="col-12 col-md-6 col-xl-3 fade-up">
                <article class="card card-sharp border-0 shadow-sm rounded-5 h-100">
                    <div class="card-body p-4">
                        <h3 class="h5 fw-bold mb-1">{{ master.name }}</h3>
                        <p class="text-muted mb-3">{{ master.specialization }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="small fw-semibold">Опыт: {{ master.experience }} лет</span>
                            {% if master.is_active %}
                                <span class="badge text-bg-success rounded-pill">Активен</span>
                            {% else %}
                                <span class="badge text-bg-secondary rounded-pill">Неактивен</span>
                            {% endif %}
                        </div>
                    </div>
                </article>
            </div>
        {% empty %}
            <div class="col-12"><div class="alert alert-info rounded-4">Мастера не найдены.</div></div>
        {% endfor %}
    </div>

    <div class="text-center bg-white rounded-5 shadow-sm p-4 p-md-5 fade-up">
        <h3 class="fw-bold">Готовы к новому образу?</h3>
        <p class="text-muted">Запишитесь онлайн за 1 минуту и выберите удобное время</p>
        <a href="{% url 'appointment_create' %}" class="btn btn-dark rounded-pill px-5 py-2">Записаться онлайн</a>
    </div>
</section>
{% endblock %}