{% extends "base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Available Group Sessions" %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2>{% trans "Available Group Sessions" %}</h2>
                <div>
                    <a href="{% url 'appointments:session_list' %}" class="btn btn-secondary">
                        <i class="fas fa-list"></i> {% trans "All Sessions" %}
                    </a>
                    <a href="{% url 'appointments:group_session_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> {% trans "Create New Session" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-3">
                            <label for="clinic" class="form-label">{% trans "Clinic" %}</label>
                            <select name="clinic" id="clinic" class="form-select">
                                <option value="">{% trans "All Clinics" %}</option>
                                {% for clinic in clinics %}
                                    <option value="{{ clinic.id }}" {% if request.GET.clinic == clinic.id|stringformat:"s" %}selected{% endif %}>
                                        {{ clinic.name_en }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="service_type" class="form-label">{% trans "Service Type" %}</label>
                            <input type="text" name="service_type" id="service_type" class="form-control" 
                                   value="{{ request.GET.service_type }}" placeholder="{% trans 'e.g., Group Therapy' %}">
                        </div>
                        <div class="col-md-2">
                            <label for="date_from" class="form-label">{% trans "From Date" %}</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" 
                                   value="{{ request.GET.date_from }}">
                        </div>
                        <div class="col-md-2">
                            <label for="date_to" class="form-label">{% trans "To Date" %}</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" 
                                   value="{{ request.GET.date_to }}">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-search"></i> {% trans "Search" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Available Sessions -->
    <div class="row">
        <div class="col-md-12">
            {% if sessions %}
                <div class="row">
                    {% for session in sessions %}
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0">
                                    <i class="fas fa-users"></i> {{ session.service_type }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <p><strong>{% trans "Session" %}:</strong> {{ session.session_number }}</p>
                                <p><strong>{% trans "Provider" %}:</strong> {{ session.provider.user.get_full_name }}</p>
                                <p><strong>{% trans "Clinic" %}:</strong> {{ session.clinic.name_en }}</p>
                                <p><strong>{% trans "Date" %}:</strong> {{ session.scheduled_date|date:"l, F d, Y" }}</p>
                                <p><strong>{% trans "Time" %}:</strong> {{ session.scheduled_time|time:"H:i" }}</p>
                                <p><strong>{% trans "Duration" %}:</strong> {{ session.duration }} {% trans "min" %}</p>
                                
                                <hr>
                                
                                <div class="mb-2">
                                    <strong>{% trans "Capacity" %}:</strong>
                                    <div class="progress mt-1" style="height: 25px;">
                                        <div class="progress-bar {% if session.capacity_percentage > 75 %}bg-warning{% else %}bg-success{% endif %}" 
                                             role="progressbar" 
                                             style="width: {{ session.capacity_percentage }}%">
                                            {{ session.current_capacity }}/{{ session.max_capacity }}
                                        </div>
                                    </div>
                                    <small class="text-muted">{{ session.available_spots }} {% trans "spots available" %}</small>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="d-grid gap-2">
                                    <a href="{% url 'appointments:session_detail' session.pk %}" class="btn btn-primary">
                                        <i class="fas fa-eye"></i> {% trans "View Details" %}
                                    </a>
                                    <a href="{% url 'appointments:session_add_patient' session.pk %}" class="btn btn-success">
                                        <i class="fas fa-user-plus"></i> {% trans "Add Patient" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if request.GET.clinic %}&clinic={{ request.GET.clinic }}{% endif %}{% if request.GET.service_type %}&service_type={{ request.GET.service_type }}{% endif %}">{% trans "First" %}</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.clinic %}&clinic={{ request.GET.clinic }}{% endif %}{% if request.GET.service_type %}&service_type={{ request.GET.service_type }}{% endif %}">{% trans "Previous" %}</a>
                        </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">
                                {% trans "Page" %} {{ page_obj.number }} {% trans "of" %} {{ page_obj.paginator.num_pages }}
                            </span>
                        </li>

                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.clinic %}&clinic={{ request.GET.clinic }}{% endif %}{% if request.GET.service_type %}&service_type={{ request.GET.service_type }}{% endif %}">{% trans "Next" %}</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.clinic %}&clinic={{ request.GET.clinic }}{% endif %}{% if request.GET.service_type %}&service_type={{ request.GET.service_type }}{% endif %}">{% trans "Last" %}</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="card">
                    <div class="card-body">
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle fa-3x mb-3"></i>
                            <h4>{% trans "No Available Group Sessions" %}</h4>
                            <p>{% trans "There are currently no group sessions with available capacity matching your criteria." %}</p>
                            <a href="{% url 'appointments:group_session_create' %}" class="btn btn-primary mt-2">
                                <i class="fas fa-plus"></i> {% trans "Create New Group Session" %}
                            </a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}