{% extends "base.html" %}
{% load static %}

{% block title %}Publication | ArchDune{% endblock %}

{% block css %}

<!-- Google Fonts -->
<link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Poppins%3A400%2C&#038;display=fallback&#038;ver=4.0.2" media="all" />
<link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CPoppins%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=auto&#038;ver=6.2"
    media="all" />

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<!-- Local Stylesheets -->
<link rel="stylesheet" href="{% static 'css/home/style.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/frems/frontend.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/frems/post-2627.css' %}" />

<link rel="stylesheet" href="{% static 'css/home/jurySection.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/book_selling_section.css' %}" />
<link rel="stylesheet" href="{% static 'css/utils/utils.css' %}" />
<link rel="stylesheet" href="{% static 'css/digital-products.css/Hero-Section.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/banners.css' %}" />
<link rel="stylesheet" href="{% static 'css/home/instructor-banner.css' %}" />
<link rel="stylesheet" href="{% static 'css/competition-list/competition-list.css' %}" />
{% endblock css %}

{% block js %}
<script src="https://kit.fontawesome.com/6916afa30b.js" crossorigin="anonymous" defer></script>
<script type="module" src="{% static 'js/competition-list-page/competition-list.js' %}" defer></script>
{% endblock js %}

{% block content %}

<section class="normal-section">
    <div class="normal-section-div">
        <div style="text-align: center">
            <span class="title-2">Publication</span>
            <span class="title-1 title-1-2">List</span>
        </div>
        <div class="card-div-fmx">
            {% for publication in publications %}
            <div class="container-fmx">
                {% if publication.images.all.0 %}
                <div class="image-container-fmx">
                    <img src="{{ publication.images.all.0.image.url }}"
                        alt="Tyrannosaurus" class="image-fmx" />
                    <div class="overlay-fmx">
                        <div class="text-wrapper-fmx">
                            <div>
                                <a href="{% url 'publicationapp:publication_detail' publication.slug %}">
                                    <button class="view-details-button-fmx">
                                        View Details 
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                {% if publication.images.all.1 %}
                <div class="image-container-fmx">
                    <img src="{{ publication.images.all.1.image.url }}"
                        alt="Tyrannosaurus" class="image-fmx" />
                    <div class="overlay-fmx">
                        <div class="text-wrapper-fmx">
                            <div class="title-fmx">{{publication.name}}</div>
                            <div class="subtitle-fmx">Sketchbook</div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        
        </div>
        {% include "pagination.html" %}
    </div>
</section>
{% endblock content %}

{% block page_js %}

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<script src="{% static 'js/home/script.js' %}"></script>
<script src="{% static 'script/home/nav.js' %}"></script>

<!-- Frem -->
<script id="jquery-core-js" src="{% static 'js/frems/jquery.min.js' %}"></script>
<script src="{% static 'js/frems/webpack.runtime.min.js' %}" id="elementor-webpack-runtime-js"></script>
<script src="{% static 'js/frems/frontend-modules.min.js' %}" id="elementor-frontend-modules-js"></script>
<script src="{% static 'js/frems/frontend.min.js' %}" id="elementor-frontend-js"></script>
<script src="{% static 'js/frems/preloaded-modules.min.js' %}" id="preloaded-modules-js"></script>

{% endblock %}