{% extends 'base.html.twig' %}

{% block title %}Class Detail - {{ classesInfo.className }}{% endblock %}

{% block customStyle %}
    <style>
        .detail-card {
            max-width: 900px;
            margin: 2rem auto;
            border-radius: 10px;
            overflow: hidden;
        }

        .detail-header {
            background-color: #007bff;
            color: #fff;
            padding: 1.2rem 2rem;
        }

        .detail-body {
            padding: 2rem;
        }

        .featured-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 3rem 0 1rem;
            text-align: center;
        }

        .featured-card {
            transition: transform 0.3s, box-shadow 0.3s;
            border-radius: 10px;
            overflow: hidden;
        }

        .featured-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .featured-card .card-body {
            padding: 1.5rem;
        }

        .badge-stream {
            background-color: #e9ecef;
            color: #6c757d;
            font-size: 0.75rem;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="container">
        <!-- Class Detail Card -->
        <div class="card detail-card shadow">
            <div class="card-header detail-header">
                <h3 class="mb-0">{{ classesInfo.className }}</h3>
            </div>
            <div class="card-body detail-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><strong>Address:</strong> {{ classesInfo.address }}</li>
                    <li class="list-group-item"><strong>Area:</strong> {{ classesInfo.area.areaName|default('N/A') }}</li>
                    <li class="list-group-item"><strong>Region:</strong> {{ classesInfo.region.regionName }}</li>
                    <li class="list-group-item"><strong>Stream:</strong>
                        <span class="badge badge-stream">{{ classesInfo.stream.streamName|default('N/A') }}</span>
                    </li>
                    <li class="list-group-item"><strong>Specialization:</strong> {{ classesInfo.specialization|default('N/A') }}</li>
                    <li class="list-group-item"><strong>Contact Number:</strong> {{ classesInfo.contactNumber|default('N/A')|linkify|raw }}</li>
                    <li class="list-group-item"><strong>Website:</strong>
                        {{ classesInfo.website|linkify|raw }}
                    </li>
                </ul>
                <div class="mt-4 text-center">
                    <a href="{{ backUrl }}" class="btn btn-outline-secondary">← Back to Home</a>
                </div>
            </div>
        </div>

        <!-- Featured Classes -->
        <h4 class="featured-title">Featured Classes</h4>
        <div class="mb-4">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                {% for class in relatedClasses %}
                    <div class="col">
                        <div class="card h-100 featured-card shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">{{ class.className }}</h5>
                                <p class="card-text mb-2">
                                    <small><strong>Region:</strong> {{ class.region.regionName }}</small><br>
                                    <small><strong>Area:</strong> {{ class.area.areaName|default('N/A') }}</small>
                                </p>
                                <a href="{{ path('classes_detail', {'id': class.id}) }}" class="btn btn-primary btn-sm w-100">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="col-12 text-center">
                        <p class="text-muted">No related classes found.</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}