{% extends "helpapp/base_help.html" %}
{% load helpapp_extras %}

{% block title %}{{ helpapp_brand_name|default:"Help Center" }}{% endblock %}

{% block content %}

<style>
    .helpapp-icon {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
    }

    /* "→" points the wrong way in RTL layouts (e.g. Arabic) — flip it. */
    [dir="rtl"] .helpapp-arrow {
        transform: scaleX(-1);
    }

    #helpapp-search-input:focus-visible,
    #helpapp-search-form button:focus-visible,
    .helpapp-category-link:focus-visible {
        outline: 2px solid var(--helpapp-primary);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {

        .helpapp-category-card,
        #helpapp-search-form button {
            transition: none !important;
            transform: none !important;
        }
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>

<section
    class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-8 py-16 text-center text-white shadow-xl">

    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(20,184,166,.25),transparent_45%)]"></div>

    <div class="relative z-10 max-w-3xl mx-auto">

        <span class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1 text-sm backdrop-blur">
            <svg class="helpapp-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5 2 5.015 3.99 3 6.5 3c1.86 0 3.457 1.08 4.15 2.64.033.07.06.14.084.211a.375.375 0 00.532 0c.024-.07.05-.14.084-.211C11.043 4.08 12.64 3 14.5 3 17.01 3 19 5.015 19 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z"
                    clip-rule="evenodd" />
            </svg>
            {{ helpapp_brand_name|default:"Help Center" }}
        </span>

        <h1 class="mt-6 text-5xl font-bold tracking-tight">
            How can we help?
        </h1>

        <p class="mt-4 text-lg text-slate-300">
            Search documentation, browse guides, and find answers in seconds.
        </p>

        <form action="{% url 'helpapp:search' %}" method="get" id="helpapp-search-form" role="search"
            class="mx-auto mt-10 max-w-2xl">

            <div class="relative">

                <svg class="absolute left-5 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" fill="none"
                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">

                    <circle cx="11" cy="11" r="7" />
                    <path d="m20 20-3.5-3.5" />

                </svg>

                <label for="helpapp-search-input" class="sr-only">
                    Search articles
                </label>

                <input id="helpapp-search-input" type="text" name="q" value="{{ query|default:'' }}"
                    placeholder="Search articles..." autocomplete="off"
                    class="w-full rounded-2xl border-0 bg-white py-4 pl-14 pr-36 text-slate-700 shadow-xl focus:outline-none focus:ring-4"
                    style="--tw-ring-color:var(--helpapp-primary)">

                <button type="submit"
                    class="absolute right-2 top-2 rounded-xl px-6 py-2.5 font-semibold text-white transition hover:scale-105"
                    style="background-color:var(--helpapp-primary)">
                    Search
                </button>

            </div>

        </form>

    </div>

</section>


<div class="mt-12" id="helpapp-search-results" aria-live="polite">

    {% if query %}
    {% include "helpapp/partials/search_results.html" %}
    {% endif %}

</div>


{% if not query %}

<div class="mt-14">

    <div class="mb-8 flex items-center justify-between">

        <div>

            <h2 class="text-2xl font-bold text-slate-900">
                Browse Categories
            </h2>

            <p class="mt-1 text-slate-500">
                Explore documentation organized by topic.
            </p>

        </div>

    </div>

    <div class="grid gap-8 md:grid-cols-2 xl:grid-cols-3">

        {% for category in categories %}

        <div
            class="helpapp-category-card group rounded-3xl border border-slate-200 bg-white p-7 shadow-sm transition duration-300 hover:-translate-y-1 hover:border-transparent hover:shadow-2xl">

            <div class="mb-4 flex items-center gap-3">

                <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-xl text-white shadow-sm"
                    style="background-color:var(--helpapp-primary)" aria-hidden="true">

                    {{ category.icon|default:"📘" }}

                </div>

                <div class="min-w-0 flex-1">

                    <h3 class="truncate text-sm font-semibold text-slate-900 sm:text-base" title="{{ category.name }}">

                        {{ category.name }}

                    </h3>

                    <p class="truncate text-xs text-slate-500">
                        Knowledge Base
                    </p>

                </div>

            </div>

            {% with articles=category.articles.all|visible_articles:visible_ids %}

            <ul class="space-y-3">

                {% for article in articles %}

                <li>

                    <a href="{{ article.get_absolute_url }}"
                        class="helpapp-category-link flex items-center gap-3 rounded-xl border border-slate-100 px-4 py-3 transition hover:border-slate-200 hover:bg-slate-50 min-w-0">
                        <span
                            class="block flex-1 min-w-0 overflow-hidden whitespace-nowrap text-ellipsis text-xs font-medium text-slate-900 sm:text-sm"
                            title="{{ article.title }}">
                            {{ article.title }}
                        </span>



                    </a>

                </li>

                {% empty %}

                <li
                    class="rounded-xl border border-dashed border-slate-200 bg-slate-50 p-5 text-center text-sm text-slate-400">

                    No articles available yet.

                </li>

                {% endfor %}

            </ul>

            {% endwith %}

        </div>

        {% empty %}

        <div class="col-span-full rounded-3xl border border-dashed border-slate-300 bg-white p-16 text-center">

            <div
                class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-slate-100 text-slate-400">

                <svg class="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                    aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                </svg>

            </div>

            <h3 class="text-xl font-semibold text-slate-900">
                No Help Articles Yet
            </h3>

            <p class="mt-3 text-slate-500">
                Populate your knowledge base by loading the demo content.
            </p>

            <code class="mt-6 inline-block rounded-lg bg-slate-100 px-4 py-2 text-sm">

                python manage.py seed_helpapp_demo

            </code>

        </div>

        {% endfor %}

    </div>

</div>

{% endif %}

{% endblock %}