{% extends 'atlas/base.html' %}

{% block content %}
    <div class="container my-4">
        <div class="row">
            <div class="col-12">
                <h2 class="mb-3">Atlas</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-8">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">Collections</h5>
                        <p class="card-text">Quick access to collections you can view or take.</p>
                        <button class="btn btn-primary"
                                hx-get="{% url 'atlas:user_collections' %}"
                                hx-target="#user-collections-placeholder"
                                hx-swap="innerHTML">
                            Collections to view / take
                        </button>
                        <button class="btn btn-outline-primary ms-2"
                                hx-get="{% url 'atlas:user_related_collections' %}"
                                hx-target="#user-related-collections-placeholder"
                                hx-swap="innerHTML">
                            My collections
                        </button>
                        <div id="user-collections-placeholder" class="mt-3"></div>
                        <div id="user-related-collections-placeholder" class="mt-3"></div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">My cases / collections</h5>
                        <p>View my <a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">cases</a> or <a href="{% url 'atlas:collection_view' %}?author={{ request.user.id }}">my collections</a>.</p>
                        <p>
                            <a href="{% url 'atlas:user_uploads' %}" class="btn btn-outline-secondary">
                                <i class="bi bi-cloud-arrow-up me-1"></i> Uploads awaiting import
                            </a>
                        </p>
                    </div>
                </div>
                <!-- user collections will load into the Collections card when requested -->
            </div>

            <div class="col-12 col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">Quick links</h6>
                        <ul class="list-unstyled mb-0">
                            <li><a href="{% url 'atlas:user_collections' %}">Collections to view / take</a></li>
                            <li><a href="{% url 'atlas:case_view' %}?author={{ request.user.id }}">My cases</a></li>
                            <li><a href="{% url 'atlas:collection_view' %}?author={{ request.user.id }}">My collections</a></li>
                            <li><a href="{% url 'atlas:user_uploads' %}">Uploads awaiting import</a></li>
                        </ul>
                    </div>
                </div>
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">Search cases</h5>
                        <div class="mb-2">
                            <div class="input-group">
                                <input class="form-control" id="case-search-input" name="q" type="search"
                                       placeholder="Search cases by title or description"
                                       hx-get="{% url 'atlas:case_search_partial' %}"
                                       hx-trigger="input delay:500ms, keyup[key=='Enter']"
                                       hx-target="#case-search-results"
                                       hx-indicator="#case-search-indicator" />
                                <a class="btn btn-outline-secondary ms-2" href="{% url 'atlas:case_search_page' %}" title="Open advanced case search">Advanced</a>
                                <span class="input-group-text" id="case-search-indicator" aria-hidden="true">
                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                    <span class="visually-hidden">Loading</span>
                                </span>
                            </div>
                        </div>
                        <style>
                        /* Hide indicator by default; HTMX will add the `htmx-request` class during requests */
                            #case-search-indicator { display: none; }
                            #case-search-indicator.htmx-request { display: inline-flex; align-items: center; }
                        </style>
                        <div id="case-search-results">
                            {% include 'atlas/partials/_case_search_results.html' with cases=None %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}