{% extends "base.html" %}
{% load static %}
{% block title %}Domains List{% endblock %}
{% block description %}Explore the list of domains available, including their logos and names.{% endblock %}
{% block keywords %}domains, logos, web development{% endblock %}
{% block og_title %}Domains List{% endblock %}
{% block og_description %}Discover a variety of domains with their logos and names listed.{% endblock %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 mx-16 mt-12 justify-items-center">
        {% for objects in domain %}
            <div class="w-full p-5 bg-white rounded-2xl shadow-[5px_5px_180px_6px_rgba(0,0,0,0.06)] overflow-hidden flex flex-col items-center">
                {% if objects.get_logo and objects.get_logo != "None" %}
                    <img src="{{ objects.get_logo }}"
                         alt="{{ objects.name }}"
                         onerror="this.style.display='none';this.nextElementSibling.style.display='flex';"
                         class="w-[100px] h-[100px] object-contain mb-2.5"
                         width="100"
                         height="100">
                {% endif %}
                <div class="{% if objects.get_logo and objects.get_logo != 'None' %}hidden{% endif %} w-[100px] h-[100px] rounded-full bg-gray-100 flex items-center justify-center text-gray-500 text-xl font-bold">
                    {{ objects.name|slice:":1"|upper }}
                </div>
                <a href="{{ objects.get_absolute_url }}"
                   class="text-lg font-bold text-gray-700 hover:text-blue-600 no-underline">{{ objects.name }}</a>
            </div>
        {% endfor %}
    </div>
    <!-- Pagination -->
    {% if is_paginated %}
        <div class="text-center mt-8">
            {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}{% if user %}&user={{ user }}{% endif %}"
                   class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-200">
                    Prev
                </a>
            {% endif %}
            <span class="mx-4 text-gray-700">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}{% if user %}&user={{ user }}{% endif %}"
                   class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-200">
                    Next
                </a>
            {% endif %}
        </div>
    {% endif %}
{% endblock content %}