{% extends 'base.html' %}
{% load static %}
{% load jformat %}
{% load persian_numbers %}

{% block title %}جزئیات مراسم{% endblock %}

{% block extra_css %}

<link rel="stylesheet" href="{% static 'css/archive/video_list.css' %}">

{% endblock %}

{% block content %}
<main class="container my-5">
    <h2>آثار ویدئویی</h2>

    <!-- ========= کارت‌های ویدئو ========= -->

    <div class="text-center mt-3 d-flex justify-content-center gap-2 flex-wrap">

        <!-- تاریخ -->
        <div>
            <button class="btn btn-outline-secondary  " type="button" aria-expanded="false"
                style="width: 170px; font-size: 14px; height: 38px;">
                بروزرسانی:{{ last_update|jalali_fa }}

            </button>

        </div>

       <!-- تاریخ -->
<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
        {% if request.GET.order == "oldest" %}
            قدیمی‌ترین
        {% elif request.GET.order == "newest" %}
            جدیدترین
        {% else %}
            تاریخ
        {% endif %}
    </button>

    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="?order=newest{% if request.GET.style %}&style={{ request.GET.style }}{% endif %}">جدیدترین</a></li>
        <li><a class="dropdown-item" href="?order=oldest{% if request.GET.style %}&style={{ request.GET.style }}{% endif %}">قدیمی‌ترین</a></li>
    </ul>
</div>

<!-- سبک -->
<div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
        {% if request.GET.style == "shoore" %}
            شور
        {% elif request.GET.style == "zamineh" %}
            زمینه
        {% elif request.GET.style == "namahanag" %}
            نماهنگ
        {% elif request.GET.style == "rozeh" %}
            روضه
        {% elif request.GET.style == "naghmeh" %}
            نغمه
        {% elif request.GET.style == "vahed" %}
            واحد
        {% else %}
            سبک
        {% endif %}
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="?{% if request.GET.order %}order={{ request.GET.order }}{% endif %}">
                همه
            </a>
        </li>

        <li><a class="dropdown-item" href="?style=shoore{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">شور</a></li>
        <li><a class="dropdown-item" href="?style=zamineh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">زمینه</a></li>
        <li><a class="dropdown-item" href="?style=namahanag{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">نماهنگ</a></li>
        <li><a class="dropdown-item" href="?style=rozeh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">روضه</a></li>
        <li><a class="dropdown-item" href="?style=naghmeh{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">نغمه</a></li>
        <li><a class="dropdown-item" href="?style=vahed{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}">واحد</a></li>
    </ul>
</div>

    </div>


  



</main>




<div class="container">
    <div class="video-slider">
        {% for video in videos %}
        <a href="{% url 'video_detail' video.id %}"
            style="text-decoration: none; color: inherit; display: flex; flex: 1; align-items: center;">

            <div class="video-card">
                <div class="video-wrapper">
                    <img src="{{video.thumbnail}}" alt="عکس صوت وجود ندارد">
                </div>
                <div class="video-body">
                    <h6 class="mt-1">{{video.title}}</h6>
                    <p style="color: rgba(123, 123, 123, 0.801); text-align: center; font-size: 12px; margin-top: 5px;">{{video.ceremony.occasion.title}}</p>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endblock %}