{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto py-8">
    <h2 class="text-2xl font-semibold mb-4">Topics in {{ category }}</h2>

    <!-- Sorting Controls -->
    <div class="mb-4">
        <form method="GET" action="{% url 'exploration_category' category=category %}">
            <select name="sort_by" onchange="this.form.submit()">
                <option value="alphabetical_asc" {% if sort_by == 'alphabetical_asc' %}selected{% endif %}>Sort Alphabetically (A-Z)</option>
                <option value="alphabetical_desc" {% if sort_by == 'alphabetical_desc' %}selected{% endif %}>Sort Alphabetically (Z-A)</option>
            </select>
        </form>
    </div>

    <!-- Display sorted data -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for exploration_data in exploration_data_list %}
        <div class="card bg-white rounded-lg shadow-md p-6 exploration-card {% if exploration_data.id in accessed_ids %}visited{% endif %}">
            <a href="{% url 'exploration_detail' id=exploration_data.id %}" class="block exploration-link">
                <span class="exploration-topic" style="font-weight: bold;">{{ exploration_data.topic }}</span>
            </a>
        </div>
        {% empty %}
        <div class="col-span-1 md:col-span-2 lg:col-span-3">
            <p>No results found for the selected criteria.</p>
        </div>
        {% endfor %}
    </div>
</div>

<div class="mt-8">
    <a href="{% url 'exploration' %}" class="reset-button active-button">Back</a>
</div>

<style>
.exploration-card a {
    text-decoration: none; /* Remove underlining */
    color: inherit; /* Inherit text color from parent */
}

.exploration-card a:hover {
    text-decoration: none; /* Remove underlining on hover */
    color: inherit; /* Inherit text color from parent on hover */
}

.exploration-topic {
    transition: color 0.3s ease; /* Add smooth transition effect */
}

.exploration-topic:hover {
    color: #FFA500; /* Change text color on hover */
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 5px;
}

.progress-bar {
    background-color: #007bff;
    transition: width 0.3s ease-in-out;
}
.visited {
    background-color: green; 
}

.reset-button {
    background-color: #F68E55;
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    margin: 10px;
    text-transform: uppercase;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.reset-button:hover {
    background-color: #FFA845;
}
footer {
   background-color: #F68E55;
   text-align: center;
   padding: 10px 0;
   position: relative;
   bottom: 0;
   width: 100%;
   font-size: 14px;
   z-index: 1;
}
</style>
{% endblock %}