{% extends 'base.html' %}

{% block title %}Polisplexity Portal{% endblock title %}

{% block extra_css %}
<style>
    .card-img-top {
        height: 200px; /* Fixed height for consistency */
        object-fit: cover; /* Ensures image covers the area nicely */
    }
    .card:hover {
        transform: scale(1.05); /* Slight zoom effect on hover for interactivity */
        transition: transform 0.3s ease-in-out;
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="container mt-4">
    <h2 class="text-center mb-4">Welcome to Polisplexity</h2>
    <p class="text-center mb-4">Select one of the options Bellow</p>

    {% for category, items in grouped_menu_items.items %}
        {% if not forloop.first %}
            <hr> <!-- Horizontal separator for every new category except the first one -->
        {% endif %}
        <div class="row">
            <div class="col-12 col-md-3 mb-4">
            <h3> {{ category.name }}</h3>
            <small> {{ category.description }}</small>
            </div>
            {% for menu_item in items %}
                <div class="col-12 col-md-3 mb-4">
                    <div class="card h-100">
            {% if menu_item.image %}
                <!-- Display Image if available -->
                <img src="{{ menu_item.image.url }}" class="card-img-top" alt="{{ menu_item.title }}">
            {% elif menu_item.icon %}
                <!-- Display Icon if image is not available but icon is -->
                <div class="card-header text-center">
                    <span class="material-symbols-rounded md-48">{{ menu_item.icon }}</span>
                </div>
            {% endif %}
                        <div class="card-body">
                            <h5 class="card-title">{{ menu_item.title }}</h5>
                            <p class="card-text">{{ menu_item.description }}</p>
                        </div>
                        <div class="card-footer bg-white">
                            <a href="{{ menu_item.url }}" class="btn btn-primary">{{ menu_item.url_text }}</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endfor %}
</div>
{% endblock content %}


{% block extra_js %}
<script>
$(function () {
    $('[data-bs-toggle="tooltip"]').tooltip() // Initialize Bootstrap tooltips
})
</script>
{% endblock extra_js %}