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

{% block title %}{{ 'reading_lists.discover'|trans({}, 'ReadingList') }} — Shamra Academia{% endblock %}

{% block og_title %}{{ 'reading_lists.discover'|trans({}, 'ReadingList') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'reading_lists.discover_description'|trans({}, 'ReadingList') }}{% endblock %}
{% block metaDescription %}{{ 'reading_lists.discover_description'|trans({}, 'ReadingList') }}{% endblock %}
{% block metaKeywords %}reading lists, قوائم القراءة, academic papers, discover, popular lists, Shamra Academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --rl-primary: #7c3aed;
            --rl-primary-light: #8b5cf6;
            --rl-primary-dark: #6d28d9;
            --rl-success: #10b981;
            --rl-warning: #f59e0b;
            --rl-bg: #f8f5ff;
            --rl-border: #e9e0ff;
        }

        .rl-discover-page {
            max-width: 1100px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .rl-hero {
            text-align: center;
            margin-bottom: 40px;
        }
        .rl-hero h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 12px;
        }
        .rl-hero p {
            color: #555;
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .rl-nav {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 32px;
        }
        .rl-nav a {
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            color: #555;
            background: #f1f5f9;
            transition: all 0.2s;
        }
        .rl-nav a:hover {
            background: #e2e8f0;
        }
        .rl-nav a.active {
            background: var(--rl-primary);
            color: #fff;
        }

        .rl-section {
            margin-bottom: 48px;
        }
        .rl-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .rl-section-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: #1a1a2e;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .rl-section-title i {
            color: var(--rl-primary);
        }

        .rl-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .rl-card {
            background: #fff;
            border-radius: 12px;
            border: 1px solid var(--rl-border);
            padding: 20px;
            transition: all 0.2s;
            text-decoration: none;
            display: block;
        }
        .rl-card:hover {
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
            transform: translateY(-2px);
            border-color: var(--rl-primary-light);
        }
        .rl-card-header {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 12px;
        }
        .rl-card-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            background: #f3e8ff;
            flex-shrink: 0;
        }
        .rl-card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1a1a2e;
            margin: 0 0 6px 0;
            line-height: 1.3;
        }
        .rl-card-owner {
            font-size: 0.85rem;
            color: #666;
        }
        .rl-card-owner i {
            margin-right: 4px;
        }
        .rl-card-description {
            color: #555;
            font-size: 0.9rem;
            margin-bottom: 12px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .rl-card-meta {
            display: flex;
            gap: 16px;
            color: #666;
            font-size: 0.85rem;
        }
        .rl-card-meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .rl-empty {
            text-align: center;
            padding: 60px 20px;
            color: #888;
            background: #f9fafb;
            border-radius: 12px;
        }
        .rl-empty i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 16px;
        }
        .rl-empty p {
            margin: 0;
            font-size: 1.1rem;
        }

        /* RTL support */
        [dir="rtl"] .rl-card-owner i {
            margin-right: 0;
            margin-left: 4px;
        }
        [dir="rtl"] .rl-card-meta {
            flex-direction: row-reverse;
        }
    </style>
{% endblock %}

{% block body %}
<div class="rl-discover-page">
    <div class="rl-hero">
        <h1>🔍 {{ 'reading_lists.discover'|trans({}, 'ReadingList') }}</h1>
        <p>{{ 'reading_lists.discover_description'|trans({}, 'ReadingList') }}</p>
    </div>

    {% if is_granted('ROLE_USER') %}
    <div class="rl-nav">
        <a href="{{ path('reading_list_index') }}">{{ 'reading_lists.my_lists'|trans({}, 'ReadingList') }}</a>
        <a href="{{ path('reading_list_discover') }}" class="active">{{ 'reading_lists.discover'|trans({}, 'ReadingList') }}</a>
    </div>
    {% endif %}

    <!-- Popular Lists -->
    <div class="rl-section">
        <div class="rl-section-header">
            <h2 class="rl-section-title">
                <i class="fas fa-fire"></i>
                {{ 'reading_lists.popular_lists'|trans({}, 'ReadingList') }}
            </h2>
        </div>

        {% if popularLists|length > 0 %}
        <div class="rl-grid">
            {% for list in popularLists %}
            <a href="{{ path('reading_list_show', {slug: list.slug}) }}" class="rl-card">
                <div class="rl-card-header">
                    <div class="rl-card-icon" {% if list.coverColor %}style="background: {{ list.coverColor }}"{% endif %}>
                        📋
                    </div>
                    <div>
                        <h3 class="rl-card-title">{{ list.name }}</h3>
                        <div class="rl-card-owner">
                            <i class="far fa-user"></i>
                            {{ list.owner.fullname ?? list.owner.username }}
                        </div>
                    </div>
                </div>
                {% if list.description %}
                <p class="rl-card-description">{{ list.description }}</p>
                {% endif %}
                <div class="rl-card-meta">
                    <span><i class="far fa-file-alt"></i> {{ list.itemCount }} {{ 'reading_lists.papers'|trans({}, 'ReadingList') }}</span>
                    <span><i class="far fa-heart"></i> {{ list.followerCount }} {{ 'reading_lists.followers'|trans({}, 'ReadingList') }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="rl-empty">
            <i class="far fa-folder-open"></i>
            <p>{{ 'reading_lists.no_public_lists'|trans({}, 'ReadingList') }}</p>
        </div>
        {% endif %}
    </div>

    <!-- Recent Lists -->
    <div class="rl-section">
        <div class="rl-section-header">
            <h2 class="rl-section-title">
                <i class="fas fa-clock"></i>
                {{ 'reading_lists.recent_lists'|trans({}, 'ReadingList') }}
            </h2>
        </div>

        {% if recentLists|length > 0 %}
        <div class="rl-grid">
            {% for list in recentLists %}
            <a href="{{ path('reading_list_show', {slug: list.slug}) }}" class="rl-card">
                <div class="rl-card-header">
                    <div class="rl-card-icon" {% if list.coverColor %}style="background: {{ list.coverColor }}"{% endif %}>
                        📋
                    </div>
                    <div>
                        <h3 class="rl-card-title">{{ list.name }}</h3>
                        <div class="rl-card-owner">
                            <i class="far fa-user"></i>
                            {{ list.owner.fullname ?? list.owner.username }}
                        </div>
                    </div>
                </div>
                {% if list.description %}
                <p class="rl-card-description">{{ list.description }}</p>
                {% endif %}
                <div class="rl-card-meta">
                    <span><i class="far fa-file-alt"></i> {{ list.itemCount }} {{ 'reading_lists.papers'|trans({}, 'ReadingList') }}</span>
                    <span><i class="fas fa-calendar-alt"></i> {{ list.createdAt|date('M j, Y') }}</span>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="rl-empty">
            <i class="far fa-folder-open"></i>
            <p>{{ 'reading_lists.no_public_lists'|trans({}, 'ReadingList') }}</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}