{% extends "layouts/base.html" %}
{% load i18n %}

{% block extrahead %}
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
<style>
    .dashboard-bg {
        background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
        color: #f8f9fa;
        padding: 50px 0;
        min-height: 100vh;
    }

    .dashboard-card {
        background: linear-gradient(to bottom right, #1a1a2e, #121220);
        border: 2px solid #6f42c1;
        border-radius: 12px;
        box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
        transition: transform 0.2s ease-in-out, box-shadow 0.3s;
        color: #f8f9fa;
    }

    .dashboard-card:hover {
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(111, 66, 193, 0.7), 0 0 30px rgba(13, 202, 240, 0.5);
    }

    .dashboard-card .card-title {
        color: #f8f9fa;
        text-shadow: 1px 1px 2px #000;
        font-family: 'Orbitron', sans-serif;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .action-btn {
        background: linear-gradient(45deg, #6f42c1, #e83e8c);
        border: none;
        border-radius: 25px;
        color: white;
        font-weight: 600;
        padding: 10px 20px;
        transition: all 0.3s ease;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(111, 66, 193, 0.4);
        color: white;
    }

    .section-title {
        font-family: 'Orbitron', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        color: #f8f9fa;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        margin-bottom: 2rem;
        border-left: 4px solid #6f42c1;
        padding-left: 1rem;
    }

    .stats-text {
        color: #00d9ff;
        text-shadow: 1px 1px 2px #000;
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-bg">
    <div class="container">
        <h2 class="section-title"><i class="fas fa-shield-alt me-2 text-warning"></i>{{ title }}</h2>

        <div class="row g-4">
            {% for clan in clans %}
            <div class="col-md-4">
                <div class="dashboard-card h-100 d-flex flex-column overflow-hidden">
                    {% if clan.banner_image %}
                    <img src="{{ clan.banner_image.url }}" class="card-img-top" alt="Clan Banner"
                        style="height: 140px; object-fit: cover; border-bottom: 2px solid #6f42c1;">
                    {% endif %}
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title text-info mb-3 d-flex align-items-center">
                            {% if clan.crest_image %}
                            <img src="{{ clan.crest_image.url }}" alt="Crest" class="me-2 rounded"
                                style="width: 28px; height: 28px; box-shadow: 0 0 10px rgba(0,217,255,0.5);">
                            {% endif %}
                            Clan ID: {{ clan.clan_id }}
                        </h5>

                        <div class="mb-3 p-2 rounded"
                            style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="text-muted small"><i class="fas fa-crosshairs me-1"></i>{% trans "Foco" %}</span>
                                <strong class="stats-text small">{{ clan.focus }}</strong>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted small"><i class="fas fa-globe me-1"></i>{% trans "Idioma" %}</span>
                                <strong class="stats-text small">{{ clan.language }}</strong>
                            </div>
                        </div>

                        <p class="card-text small text-muted flex-grow-1"
                            style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                            {{ clan.motd|default:_("Nenhuma apresentação fornecida.") }}
                        </p>

                        <ul class="list-unstyled small mb-4 mt-2 p-3 rounded"
                            style="background: rgba(0,0,0,0.3); border-left: 3px solid #00d9ff;">
                            <li class="mb-2 d-flex justify-content-between">
                                <span class="text-light">{% trans "Nível Mínimo:" %}</span>
                                <span class="badge bg-primary">{{ clan.min_level }}+</span>
                            </li>
                            <li class="d-flex justify-content-between align-items-center">
                                <span class="text-light">{% trans "Classes exigidas:" %}</span>
                                <span class="badge bg-dark border border-secondary text-info text-truncate"
                                    style="max-width: 120px;" title="{{ clan.required_classes|default:_('Qualquer') }}">
                                    {{ clan.required_classes|default:_("Qualquer") }}
                                </span>
                            </li>
                        </ul>

                        <a href="{% url 'clans:detail' clan.clan_id %}" class="action-btn w-100 mt-auto">
                            <i class="fas fa-eye me-2"></i>{% trans "Ver Perfil do Clã" %}
                        </a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="dashboard-card p-5 text-center">
                    <i class="fas fa-search-minus fa-3x mb-3" style="color: #6f42c1;"></i>
                    <h4 class="card-title text-light mb-2">{% trans "Nenhum clã está recrutando ativamente no momento." %}</h4>
                    <p class="text-muted">{% trans "Tente novamente mais tarde!" %}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}