{% extends "base.html" %}
{% block content %}
<div class="container mx-auto py-8">
    <h2 class="text-2xl font-semibold mb-4">Search Results</h2>
    
    <!-- Sorting Controls -->
    <div class="mb-4">
        <form method="GET" action="{% url 'exploration_search' %}" class="flex items-center space-x-4">
            <input type="hidden" name="rdlc" value="{{ rdlc }}">
            <input type="hidden" name="harmful_effects" value="{{ harmful_effects }}">
            <input type="hidden" name="possible_causes" value="{{ possible_causes }}">
            <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 Results -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Display the number of results found -->
	<p>{{ results_count }} result{% if results_count != 1 %}s{% endif %} found</p>
        {% if results %}
            {% for result in results %}
                <div class="card bg-white rounded-lg shadow-md p-6 exploration-card {% if result.id in accessed_ids %}visited{% endif %}">
                    <a href="{% url 'exploration_detail' id=result.id %}" class="block exploration-link">
                        <span class="exploration-topic" style="font-weight: bold;">{{ result.topic }} ({{ result.rdlc }})</span>
                    </a>
                </div>
            {% endfor %}
        {% else %}
            <div class="col-span-1 md:col-span-2 lg:col-span-3">
                <p>No results found for the selected criteria.</p>
            </div>
        {% endif %}
    </div>
    
    <div class="mt-8">
        <a href="{% url 'exploration' %}" class="reset-button active-button">Back to Exploration</a>
    </div>
</div>
<style>
    /* Styles for the card */
    .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: #d4edda; /* Light green for visited cards */
    }

    .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;
    }
</style>
{% endblock %}