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

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

{% block css %}

<link rel="stylesheet" href="{% static 'css/photography/photography.css' %}" />
<link rel="stylesheet" href="{% static 'css/utils/tailwind.css' %}" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-autoplay.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-fullscreen.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-rotate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-share.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-zoom.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-pager.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-comments.min.css" />

{% endblock css %}

{% block js %} 
<script type="module" src="{% static 'script/photography/photography.js' %}" defer></script>
<script type="module" src="{% static 'script/lightgallery/lightGalleryFinal.js' %}" defer></script>
<script src="{% static 'script/lightgallery/showCloseIcon.js' %}" type="module" defer></script>
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
{% endblock js %}

{% block content %}
<div class="photography-head">
    <div class="wro">
        <div class="photography-title">
            <h2>Photography</h2>
            <p>
                Photography is the art of capturing moments <br />
                through a camera's lens.
            </p>
        </div>
    </div>
</div>
<div class="photography-gallery mt-5">
    <div class="wro">
        <div>
            <div class="mx-2">
                <form method="GET" action="{% url 'photographyapp:photography_search' %}">
                    <input type="text" name="search" placeholder="Search image or author"
                        class="border-[black] border-[1px] py-2 px-3 outline-none rounded" />
                    <button type="submit" class="hidden">Search</button>
                </form>
            </div>
        </div>

        <div class="photography-button-filter flex flex-wrap my-5 mx-2 photography-filtering-button-div-js-selector">
            <form method="GET" action="{% url 'photographyapp:photography_page' %}" style="display:inline;">
                <button type="submit"
                    class="photography-filtering-button {% if not current_photographer %}active-btn{% endif %}">
                    <img src="{% static 'images/photography_page/all-gallery.jpg' %}" class="gallery-img-306" />
                    <span>All</span>
                </button>
            </form>

            {% for photographer in photographers %}
            <form method="GET" action="{% url 'photographyapp:photographer_photos' photographer.id %}"
                style="display:inline;">
                <button type="submit"
                    class="photography-filtering-button {% if current_photographer.id == photographer.id %}active-btn{% endif %}">
                    <img src="{{ photographer.profile_image.url }}" class="gallery-img-306" />
                    <span>{{ photographer }}</span>
                </button>
            </form>
            {% endfor %}
        </div>

        <section class="gallery gallery-div-js-selector">
            <ul class="images images-list-of-photography mx-2" id="gallery">
                {% for photo in photos %}
                <a class="card" data-lg-size="1600-1067" src="{{ photo.image.url }}"
                    data-lg-tumbnail="{{ photo.image.url }}" data-sub-html="<p>{{ photo.description }}</p>">
                    <img alt="{{ photo.title }}" src="{{ photo.image.url }}" />
                    <span class="cardHover">
                        <span class="cardHoverButtomUser">
                            <img src="{{ photo.photographer.profile_image.url }}" alt="" />
                            <span class="cardHoverName">{{ photo.photographer }}</span>
                        </span>
                        <span class="cardHoverButtomLick">
                            <button hx-post="{% url 'photographyapp:like_photo' photo.id %}" hx-target="this"
                                hx-swap="innerHTML" class="like-button" hx-trigger="click"
                                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
                                <i class="fa-regular fa-heart"></i>
                                <span class="like-count">{{ photo.likes }}</span>
                            </button>
                        </span>
                </a>
                {% endfor %}
            </ul>
        </section>

        {% if photos.has_other_pages %}
        <div>
            <div class="mx-3 my-3 flex gap-2">
                {% for i in photos.paginator.page_range %}
                <form method="GET" style="display:inline;">
                    <input type="hidden" name="page" value="{{ i }}">
                    <button type="submit"
                        class="border-[1px] border-[rgba(0,0,0,0.3)] text-[rgba(0,0,0,0.7)] w-[2rem] rounded active:scale-[0.95] pagination-button-photography-1 {% if photos.number == i %}font-bold{% endif %}">
                        {{ i }}
                    </button>
                </form>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% include "pagination.html" %}

    </div>
</div>
{% endblock content %}

{% block page_js %}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Add event listeners to all like buttons
        document.querySelectorAll('.like-button').forEach(button => {
            button.addEventListener('click', function (e) {
                // Stop the event from propagating up to parent elements
                e.stopPropagation();
            });
        });
    });
</script>

<!-- #page -->
<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 'home/script.js' %}"></script>
<script src="{% static 'script/home/nav.js' %}"></script>
<script src="{% static 'script/hotography/fotography.js' %}" type="module"></script>
{% endblock %}