{% extends '@syndexAcademic/main_layout.html.twig' %}

{% trans_default_domain "Academia" %}
{% set locale = app.request.locale %}

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

{% block og_url %}{{ app.request.scheme ~'://' ~ app.request.httpHost ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}{% endblock %}
{% block og_description %}{{ research.arabicAbstract[0:200] }}{% endblock %}

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

{% block css %}
    <style>
        .external-badge {
            display: inline-block;
            background: #17a2b8;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            margin-bottom: 15px;
        }
        .external-source {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }
        .external-source a {
            color: #007bff;
            text-decoration: none;
        }
        .external-source a:hover {
            text-decoration: underline;
        }
        .research-meta {
            color: #666;
            margin: 10px 0;
        }
        .research-meta i {
            margin-left: 5px;
            color: #888;
        }
        .abstract-section {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 25px;
            margin: 20px 0;
        }
        .abstract-section h3 {
            color: #333;
            margin-bottom: 15px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        .field-tags {
            margin: 15px 0;
        }
        .field-tag {
            display: inline-block;
            background: #e9ecef;
            color: #495057;
            padding: 5px 12px;
            border-radius: 15px;
            margin: 3px;
            font-size: 13px;
        }
        .source-btn {
            display: inline-block;
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none;
            margin: 5px;
            font-weight: 500;
        }
        .source-btn-primary {
            background: #007bff;
            color: white;
        }
        .source-btn-primary:hover {
            background: #0056b3;
            color: white;
            text-decoration: none;
        }
        .source-btn-secondary {
            background: #28a745;
            color: white;
        }
        .source-btn-secondary:hover {
            background: #1e7e34;
            color: white;
            text-decoration: none;
        }
        .authors-list {
            margin: 15px 0;
        }
        .author-name {
            display: inline-block;
            background: #fff3cd;
            color: #856404;
            padding: 5px 12px;
            border-radius: 15px;
            margin: 3px;
            font-size: 13px;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="container">
        
        <div class="row">
            <div class="col-xs-12 col-md-9">
                
                {# External Document Badge #}
                <span class="external-badge">
                    <i class="fa fa-external-link"></i> مصدر خارجي
                </span>
                
                {# Title #}
                <div class="head-title">
                    <h1 class="res-title">
                        {{ research.arabicFullTitle }}
                    </h1>
                    {% if research.englishFullTitle %}
                        <h2 class="res-title" dir="ltr" style="font-size: 18px; color: #666;">
                            {{ research.englishFullTitle }}
                        </h2>
                    {% endif %}
                </div>

                {# Authors #}
                {% if research.textualPublisher %}
                    <div class="authors-list">
                        <strong><i class="fa fa-users"></i> الباحثون:</strong>
                        {% if research.textualPublisher is iterable %}
                            {% for author in research.textualPublisher %}
                                <span class="author-name">{{ author }}</span>
                            {% endfor %}
                        {% else %}
                            <span class="author-name">{{ research.textualPublisher }}</span>
                        {% endif %}
                    </div>
                {% endif %}

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

                {# Fields/Topics #}
                {% if research.arabicFieldNames|length > 0 %}
                    <div class="field-tags">
                        <strong><i class="fa fa-tags"></i> المجالات:</strong>
                        {% for field in research.arabicFieldNames %}
                            <span class="field-tag">{{ field }}</span>
                        {% endfor %}
                    </div>
                {% endif %}

                {# Source Links #}
                <div class="external-source">
                    <h4><i class="fa fa-link"></i> الوصول للمصدر الأصلي</h4>
                    <p style="color: #666; margin-bottom: 15px;">
                        هذا البحث متوفر من مصدر خارجي. اضغط على الرابط أدناه للوصول إلى النص الكامل.
                    </p>
                    
                    {% if research.sourceUrl %}
                        <a href="{{ research.sourceUrl }}" target="_blank" rel="noopener noreferrer" class="source-btn source-btn-primary">
                            <i class="fa fa-external-link"></i> عرض في المصدر الأصلي
                        </a>
                    {% endif %}
                    
                    {% if research.pdfUrl %}
                        <a href="{{ research.pdfUrl }}" target="_blank" rel="noopener noreferrer" class="source-btn source-btn-secondary">
                            <i class="fa fa-file-pdf-o"></i> تحميل PDF
                        </a>
                    {% endif %}
                    
                    {% if research.sourceDomain %}
                        <p style="margin-top: 15px; color: #888; font-size: 13px;">
                            <i class="fa fa-globe"></i> المصدر: {{ research.sourceDomain }}
                        </p>
                    {% endif %}

                    {% if research.doi %}
                        <p style="margin-top: 10px; color: #888; font-size: 13px;">
                            <i class="fa fa-barcode"></i> DOI: 
                            <a href="https://doi.org/{{ research.doi }}" target="_blank">{{ research.doi }}</a>
                        </p>
                    {% endif %}
                </div>

                {# Abstract #}
                {% if research.arabicAbstract %}
                    <div class="abstract-section">
                        <h3><i class="fa fa-file-text-o"></i> الملخص</h3>
                        <p style="line-height: 1.8; text-align: justify;">
                            {{ research.arabicAbstract }}
                        </p>
                    </div>
                {% endif %}

                {% if research.englishAbstract %}
                    <div class="abstract-section">
                        <h3><i class="fa fa-file-text-o"></i> Abstract</h3>
                        <p style="line-height: 1.8; text-align: justify;" dir="ltr">
                            {{ research.englishAbstract }}
                        </p>
                    </div>
                {% endif %}

                {# Keywords #}
                {% if research.tags is defined and research.tags|length > 0 %}
                    <div class="field-tags">
                        <strong><i class="fa fa-key"></i> الكلمات المفتاحية:</strong>
                        {% for tag in research.tags %}
                            <span class="field-tag">{{ tag.context }}</span>
                        {% endfor %}
                    </div>
                {% endif %}

            </div>
            
            {# Sidebar #}
            <div class="col-xs-12 col-md-3">
                <div style="background: #f8f9fa; border-radius: 8px; padding: 20px; position: sticky; top: 20px;">
                    <h4 style="margin-bottom: 15px;"><i class="fa fa-info-circle"></i> معلومات البحث</h4>
                    
                    <p><strong>الحالة:</strong> <span class="external-badge" style="font-size: 12px;">مصدر خارجي</span></p>
                    
                    {% if research.arabicCategoryName %}
                        <p><strong>النوع:</strong> {{ research.arabicCategoryName }}</p>
                    {% endif %}
                    
                    {% if research.arabicPublisherName %}
                        <p><strong>الناشر:</strong> {{ research.arabicPublisherName }}</p>
                    {% endif %}
                    
                    {% if research.publicationDate %}
                        <p><strong>تاريخ النشر:</strong> {{ research.publicationDate }}</p>
                    {% endif %}
                    
                    <hr>
                    
                    <p style="color: #888; font-size: 12px;">
                        <i class="fa fa-info-circle"></i> 
                        هذا البحث مفهرس من مصدر خارجي. للحصول على النص الكامل، يرجى زيارة المصدر الأصلي.
                    </p>
                </div>
            </div>
        </div>
        
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}