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

{% block links %}
    <link rel="canonical" href="{{ url('shamra_academia_research_show', {'slug': research.slug}) }}">
{% endblock %}

{% block css %}
    {{ parent() }}
    .research-title {
        font-size: 1.4em;
        line-height: 1.6;
        color: #222;
        margin: 10px 15px;
    }
    .research-subtitle {
        font-size: 1.1em;
        color: #666;
        margin: 5px 15px 15px;
    }
    .meta-section {
        padding: 10px 15px;
        color: #666;
        font-size: 0.95em;
        line-height: 2;
    }
    .meta-section i {
        margin-left: 4px;
        color: #888;
    }
    .meta-divider {
        color: #ccc;
        margin: 0 6px;
    }
    .section-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px 15px;
        margin: 12px 15px;
    }
    .section-card h3 {
        font-size: 1.1em;
        color: #333;
        margin: 0 0 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #007bff;
    }
    .section-card p {
        font-size: 1em;
        line-height: 1.8;
        text-align: justify;
    }
    .field-tag, .keyword-tag, .author-tag {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 15px;
        margin: 3px;
        font-size: 0.85em;
        text-decoration: none;
    }
    .field-tag {
        background: #e9ecef;
        color: #495057;
    }
    .keyword-tag {
        background: #d4edda;
        color: #155724;
    }
    .author-tag {
        background: #fff3cd;
        color: #856404;
    }
    .download-box {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px 15px;
        margin: 12px 15px;
        text-align: center;
    }
    .download-link {
        display: inline-block;
        padding: 12px 24px;
        background: #28a745;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
        font-size: 1em;
    }
    .login-link {
        display: inline-block;
        padding: 12px 24px;
        background: #007bff;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
    }
    .promo-box {
        border-radius: 10px;
        padding: 16px 20px;
        margin-bottom: 18px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .promo-box h4 {
        margin: 0 0 4px 0;
        font-size: 15px;
        font-weight: 700;
    }
    .promo-box p {
        margin: 0;
        font-size: 12px;
        opacity: 0.9;
    }
    .promo-cta {
        display: inline-block;
        padding: 7px 18px;
        border-radius: 18px;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
    }
    .promo-playground {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .promo-playground .promo-cta {
        background: #fff;
        color: #667eea;
    }
    .promo-ocr {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    .promo-ocr .promo-cta {
        background: #fff;
        color: #f5576c;
    }
    .promo-references {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    .promo-references .promo-cta {
        background: #fff;
        color: #4facfe;
    }
{% endblock %}

{% block title %}
    {% if research.arabicFullTitle is not null %}
        {{ research.arabicFullTitle }}
    {% else %}
        {{ research.englishFullTitle }}
    {% endif %}
{% endblock %}

{% block body %}
    {# Promotional Box - randomly show one (server-side) #}
    {% set promoIndex = random(2) %}
    {% if promoIndex == 0 %}
        <div class="promo-box promo-playground">
            <div>
                <h4>✨ {{ 'playground_banner.title'|trans({}, 'Academia') }}</h4>
                <p>{{ 'playground_banner.description'|trans({}, 'Academia') }}</p>
            </div>
            <a href="/playground" class="promo-cta">
                {{ 'playground_banner.cta'|trans({}, 'Academia') }}
            </a>
        </div>
    {% elseif promoIndex == 1 %}
        <div class="promo-box promo-ocr">
            <div>
                <h4>📄 {{ 'ocr_banner.title'|trans({}, 'Academia') }}</h4>
                <p>{{ 'ocr_banner.description'|trans({}, 'Academia') }}</p>
            </div>
            <a href="/ocr" class="promo-cta">
                {{ 'ocr_banner.cta'|trans({}, 'Academia') }}
            </a>
        </div>
    {% else %}
        <div class="promo-box promo-references">
            <div>
                <h4>📚 {{ 'references_banner.title'|trans({}, 'Academia') }}</h4>
                <p>{{ 'references_banner.description'|trans({}, 'Academia') }}</p>
            </div>
            <a href="/myreferences" class="promo-cta">
                {{ 'references_banner.cta'|trans({}, 'Academia') }}
            </a>
        </div>
    {% endif %}

    {# Title #}
    <h1 class="research-title">
        {{ research.arabicFullTitle }}
    </h1>
    {% if research.englishFullTitle %}
        <h2 class="research-subtitle" dir="ltr">
            {{ research.englishFullTitle }}
        </h2>
    {% endif %}

    {# Authors #}
    {% if research.textualPublisher %}
        <div style="padding: 5px 15px;">
            <strong><i class="fas fa-users"></i> {{ 'amp.authors'|trans({}, 'Academia')|default('الباحثون') }}:</strong>
            {% if research.textualPublisher is iterable %}
                {% for author in research.textualPublisher %}
                    <span class="author-tag">{{ author }}</span>
                {% endfor %}
            {% else %}
                <span class="author-tag">{{ research.textualPublisher }}</span>
            {% endif %}
        </div>
    {% endif %}

    {# Metadata #}
    <div class="meta-section">
        {% if research.arabicCategoryName %}
            <i class="fas fa-folder"></i> {{ research.arabicCategoryName }}
            <span class="meta-divider">|</span>
        {% endif %}
        {% if research.arabicPublisherName %}
            <i class="fas fa-building"></i> {{ research.arabicPublisherName }}
            <span class="meta-divider">|</span>
        {% endif %}
        {% if research.publicationDate %}
            <i class="fas fa-calendar-alt"></i> {{ research.publicationDate }}
        {% endif %}
    </div>

    {# Fields #}
    {% if research.arabicFieldNames|length > 0 %}
        <div style="padding: 5px 15px;">
            <strong><i class="fas fa-tags"></i> {{ 'amp.fields'|trans({}, 'Academia')|default('المجالات') }}:</strong>
            {% for fieldName in research.arabicFieldNames %}
                <span class="field-tag">{{ fieldName }}</span>
            {% endfor %}
        </div>
    {% endif %}

    {# Keywords #}
    {% if research.tags|length > 0 %}
        <div style="padding: 5px 15px;">
            <strong><i class="fas fa-key"></i> {{ 'amp.keywords'|trans({}, 'Academia')|default('الكلمات المفتاحية') }}:</strong>
            {% for tag in research.tags %}
                {% if tag is iterable or tag.context is defined %}
                    <span class="keyword-tag">{{ tag.context }}</span>
                {% else %}
                    <span class="keyword-tag">{{ tag }}</span>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}

    {# Download #}
    <div class="download-box">
        {% if app.user %}
            <a href="{{ path('shamra_academia_research_show', {'slug': research.slug}) }}" class="download-link">
                <i class="fas fa-external-link-alt"></i> {{ 'amp.view_full'|trans({}, 'Academia')|default('عرض الصفحة الكاملة') }}
            </a>
        {% else %}
            <p style="color: #666; margin-bottom: 12px;">
                <i class="fas fa-user"></i> {{ 'amp.login_prompt'|trans({}, 'Academia')|default('سجل الدخول للوصول الكامل') }}
            </p>
            <a href="/login" class="login-link">
                <i class="fas fa-sign-in-alt"></i> {{ 'amp.login'|trans({}, 'Academia')|default('تسجيل الدخول') }}
            </a>
        {% endif %}
    </div>

    {# Arabic Abstract #}
    {% if research.arabicAbstract %}
        <div class="section-card">
            <h3><i class="fas fa-file-alt"></i> {{ 'research.arabicAbstract'|trans({}, 'Academia') }}</h3>
            <p>{{ research.arabicAbstract }}</p>
        </div>
    {% endif %}

    {# English Abstract #}
    {% if research.englishAbstract %}
        <div class="section-card">
            <h3><i class="fas fa-file-alt"></i> {{ 'research.englishAbstract'|trans({}, 'Academia') }}</h3>
            <p dir="ltr">{{ research.englishAbstract }}</p>
        </div>
    {% endif %}
{% endblock %}