{% extends "base.html" %}

{% block title %}{{ activity.name }} - INDEX Sistem Jocuri{% endblock %}

{% block content %}
<div class="activity-detail-page">
    <!-- Breadcrumb navigation -->
    <nav class="breadcrumb">
        <a href="{{ url_for('main.index') }}">Căutare</a>
        <span class="breadcrumb-separator">»</span>
        <span class="breadcrumb-current">{{ activity.get_display_name() }}</span>
    </nav>

    <!-- Activity header -->
    <header class="activity-detail-header">
        <div class="activity-title-section">
            <h1 class="activity-detail-title">{{ activity.get_display_name() }}</h1>
            <span class="activity-category-badge">{{ display_names.get(activity.category, activity.category) }}</span>
            {% if activity.content_type %}
            <span class="activity-content-type-badge">{{ display_names.get(activity.content_type, activity.content_type) }}</span>
            {% endif %}
            {% if activity.needs_review %}
            <span class="activity-badge needs-review" title="Această activitate necesită verificare">⚠ De verificat</span>
            {% endif %}
        </div>
        
        {% if activity.subcategory %}
        <p class="activity-subcategory">{{ activity.subcategory }}</p>
        {% endif %}
    </header>

    <!-- Activity content -->
    <div class="activity-detail-content">
        <!-- Main description (Romanian-primary, falls back to original) -->
        <section class="activity-section">
            <h2 class="section-title">Descriere</h2>
            <div class="activity-description">{{ activity.get_display_description() }}</div>
        </section>

        <!-- Rules and variations -->
        {% if activity.get_display_rules() %}
        <section class="activity-section">
            <h2 class="section-title">Reguli</h2>
            <div class="activity-rules">{{ activity.get_display_rules() }}</div>
        </section>
        {% endif %}

        {% if activity.get_display_variations() %}
        <section class="activity-section">
            <h2 class="section-title">Variații</h2>
            <div class="activity-variations">{{ activity.get_display_variations() }}</div>
        </section>
        {% endif %}

        <!-- Original (pre-translation) text, collapsed by default -->
        {% if activity.has_translation() %}
        <details class="activity-section original-text">
            <summary class="section-title">Text original ({{ display_names.get(activity.language, activity.language or 'sursă') }})</summary>
            <div class="original-content">
                <h3 class="metadata-title">{{ activity.name }}</h3>
                <div class="activity-description">{{ activity.description }}</div>
                {% if activity.rules %}
                <h4 class="metadata-title">Reguli</h4>
                <div class="activity-rules">{{ activity.rules }}</div>
                {% endif %}
                {% if activity.variations %}
                <h4 class="metadata-title">Variații</h4>
                <div class="activity-variations">{{ activity.variations }}</div>
                {% endif %}
            </div>
        </details>
        {% endif %}

        <!-- Metadata grid -->
        <section class="activity-section">
            <h2 class="section-title">Detalii activitate</h2>
            <div class="metadata-grid">
                {% if activity.get_age_range_display() != "toate vârstele" %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Grupa de vârstă</h3>
                    <p class="metadata-value">{{ activity.get_age_range_display() }}{% if activity.is_estimated('age_group_min') or activity.is_estimated('age_group_max') %} <em class="estimated">(estimat)</em>{% endif %}</p>
                </div>
                {% endif %}

                {% if activity.get_participants_display() != "orice număr" %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Participanți</h3>
                    <p class="metadata-value">{{ activity.get_participants_display() }}{% if activity.is_estimated('participants_min') or activity.is_estimated('participants_max') %} <em class="estimated">(estimat)</em>{% endif %}</p>
                </div>
                {% endif %}

                {% if activity.get_duration_display() != "durată variabilă" %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Durata</h3>
                    <p class="metadata-value">{{ activity.get_duration_display() }}{% if activity.is_estimated('duration_min') or activity.is_estimated('duration_max') %} <em class="estimated">(estimat)</em>{% endif %}</p>
                </div>
                {% endif %}

                {% if activity.get_indoor_outdoor_display() %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Interior / exterior</h3>
                    <p class="metadata-value">{{ activity.get_indoor_outdoor_display() }}{% if activity.is_estimated('indoor_outdoor') %} <em class="estimated">(estimat)</em>{% endif %}</p>
                </div>
                {% endif %}

                {% if activity.get_space_needed_display() %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Spațiu necesar</h3>
                    <p class="metadata-value">{{ activity.get_space_needed_display() }}{% if activity.is_estimated('space_needed') %} <em class="estimated">(estimat)</em>{% endif %}</p>
                </div>
                {% endif %}

                {% if activity.get_materials_display() != "nu specificate" %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Materiale necesare</h3>
                    <p class="metadata-value">{{ activity.get_materials_display() }}</p>
                </div>
                {% endif %}

                {% if activity.skills_developed %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Competențe dezvoltate</h3>
                    <p class="metadata-value">{{ activity.skills_developed }}</p>
                </div>
                {% endif %}

                {% if activity.difficulty_level %}
                <div class="metadata-card">
                    <h3 class="metadata-title">Nivel dificultate</h3>
                    <p class="metadata-value">{{ activity.difficulty_level }}</p>
                </div>
                {% endif %}
            </div>
        </section>

        <!-- Additional materials -->
        {% if activity.materials_list and activity.materials_list != activity.get_materials_display() %}
        <section class="activity-section">
            <h2 class="section-title">Lista detaliată materiale</h2>
            <div class="materials-list">{{ activity.materials_list }}</div>
        </section>
        {% endif %}

        <!-- Keywords -->
        {% if activity.keywords %}
        <section class="activity-section">
            <h2 class="section-title">Cuvinte cheie</h2>
            <div class="keywords">
                {% for keyword in activity.keywords.split(',') %}
                <span class="keyword-tag">{{ keyword.strip() }}</span>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        <!-- Source information -->
        <section class="activity-section">
            <h2 class="section-title">Informații sursă</h2>
            <div class="source-info">
                {% if activity.source_file %}
                {% if config.SOURCE_DOWNLOAD_ENABLED %}
                <p><strong>Fișier sursă:</strong>
                   <a href="{{ url_for('main.source_download', activity_id=activity.id) }}">{{ activity.source_file }}</a>
                   <span class="download-hint">(descarcă)</span></p>
                {% else %}
                <p><strong>Fișier sursă:</strong> {{ activity.source_file }}</p>
                {% endif %}
                {% endif %}

                {% if activity.page_reference %}
                <p><strong>Referință:</strong> {{ activity.page_reference }}</p>
                {% endif %}
            </div>
        </section>
    </div>

    <!-- Similar activities -->
    {% if similar_activities %}
    <section class="similar-activities">
        <h2 class="section-title">Activități similare</h2>
        <div class="similar-activities-grid">
            {% for similar in similar_activities %}
            <article class="similar-activity-card">
                <h3 class="similar-activity-title">
                    <a href="{{ url_for('main.activity_detail', activity_id=similar.id) }}">
                        {{ similar.name }}
                    </a>
                </h3>
                <p class="similar-activity-description">
                    {{ similar.description[:100] }}{% if similar.description|length > 100 %}...{% endif %}
                </p>
                <div class="similar-activity-meta">
                    {% if similar.get_age_range_display() != "toate vârstele" %}
                    <span class="meta-item">{{ similar.get_age_range_display() }}</span>
                    {% endif %}
                    {% if similar.get_participants_display() != "orice număr" %}
                    <span class="meta-item">{{ similar.get_participants_display() }}</span>
                    {% endif %}
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Action buttons -->
    <div class="activity-actions">
        <a href="javascript:history.back()" class="btn btn-secondary">
            ← Înapoi la rezultate
        </a>
        <a href="{{ url_for('main.index') }}" class="btn btn-primary">
            Căutare nouă
        </a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Print functionality
function printActivity() {
    window.print();
}

// Copy link functionality
function copyLink() {
    navigator.clipboard.writeText(window.location.href).then(function() {
        alert('Link copiat în clipboard!');
    });
}

// Add print styles when printing
window.addEventListener('beforeprint', function() {
    document.body.classList.add('printing');
});

window.addEventListener('afterprint', function() {
    document.body.classList.remove('printing');
});
</script>
{% endblock %}