Gallery-Archivist/archivist/sites/templates/fa/user_page.html

<!-- user_page.html -->

{% extends "base.html" %}

{% block title %}{{ user.artist }}'s User Page{% endblock %}

{% load custom_filters %}

{% load static %}

{% block content %}

<div class="row g-4 mt-4">
    <h1 class="">Archive of {{ user.artist }}'s Submissions</h1>
    <div class="gallery-container">
        {% for submission in page_obj %}
            <a class="img-holder" href="{% url 'fa:submission_detail' submission_id=submission.submission_id %}">
                <div class="layer">
                    <h3>{{ submission.title }}</h3>
                    <p>{{ submission.date |date:'Y-m-d H:i' }}</p>
                    <p class="badge bg-secondary text-2xl"> {{ submission.mature_rating.mature }}</p>
                </div>
                {% if submission.file %}
                    {% if submission.file.file.url|is_image %}
                        {% if submission.mature_rating.mature == "Adult" or submission.mature_rating.mature == "Mature" %}
                            <img class="blur" src="{{ submission.file.file.url }}" alt="{{ submission.title }}">
                        {% else %}
                            <img src="{{ submission.file.file.url }}" alt="{{ submission.title }}">
                        {% endif %}
                    {% else %}
                        <img src="{% static 'img/no-image-dark.webp' %}" alt="No image">    
                    {% endif %}
                {% else %}
                    <img src="{% static 'img/no-image-dark.webp' %}" alt="No image">
                {% endif %}
            </a>
        {% endfor %}
    </div>
</div>

<div class="row justify-content-center border border-2">

    <!-- Display Bootstrap pagination -->
    <div class="col-6">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="First">
                            &laquo;
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                            <span aria-hidden="true">&lsaquo;</span>
                        </a>
                    </li>
                {% endif %}

                <li class="page-item disabled">
                    <span class="page-link">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                    </span>
                </li>

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                            <span aria-hidden="true">&rsaquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                            &raquo;
                        </a>
                    </li>
                {% endif %}
                
            </ul>
        </nav>
    </div>

    <!-- Jump-to field -->
    <div class="col-3">
        <form method="GET" class="row g-3">
            <label for="jumpToPage" class="col-auto col-form-label">Jump to:</label>
            <div class="col-3">
              <input type="number" name="page" id="jumpToPage" class="form-control" min="1" max="{{ page_obj.paginator.num_pages }}" value="{{ page_obj.number }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">Go</button>
            </div>
        </form>
    </div>
</div>

{% comment %} <div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; First</a>
            <a href="?page={{ page_obj.previous_page_number }}">Previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">Next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
        {% endif %}
    </span>
</div> {% endcomment %}
{% endblock %}

{% comment %} {% block scripts %}
{{ block.super }}
<script>
    // Enable Bootstrap tooltips
    document.addEventListener("DOMContentLoaded", function () {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>


{% endblock %} {% endcomment %}