{% extends theme("layout.html") %}
{% set page_title = _("Search") %}
{% block content %}
    {% from theme("_macros/form.html") import render_field, render_input_field, render_select_field %}

    <div class="page-view">
        <ol class="breadcrumb flaskbb-breadcrumb bg-light">
            <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
            <li class="breadcrumb-item active">{% trans %}Search{% endtrans %}</li>
        </ol>

        <div class="card page">
            <div class="card-header page-header">{% trans %}Search{% endtrans %}</div>
            <div class="card-body page-body">
                {% set has_advanced_data = form.forum_id.data or form.author.data or form.date_from.data or form.date_to.data or form.state.data %}
                <div class="row justify-content-md-center">
                    <div class="col-8">
                        <form role="form" method="post">
                            {{ form.hidden_tag() }}
                            <div class="input-group mb-3">
                                {{ render_input_field(form.search_query, control_class="col-3") }}
                                {{ render_select_field(form.search_type, control_class="flex-grow-0 w-auto") }}
                                <button class="btn btn-primary" type="submit">
                                    <span class="fas fa-search"></span> {% trans %}Search{% endtrans %}
                                </button>
                            </div>
                            <div class="col-auto">
                                <button type="button"
                                        id="advanced-filter-toggle"
                                        class="btn btn-outline-dark mb-3{{ ' d-none' if form.search_type.data != 'forum' }}">
                                    {% trans %}Advanced filters{% endtrans %}
                                    <span id="advanced-filter-icon" class="fas fa-chevron-down"></span>
                                </button>
                            </div>
                            {{ form.advanced_open }}
                            <div class="col-8">
                                <div id="advanced-search"
                                     class="{{ '' if (form.search_type.data == 'forum' and (has_advanced_data or form.advanced_open.data)) else 'd-none' }}">
                                    <div class="row">
                                        <div class="col-md-6">
                                            {{ render_field(form.content_type, div_class="mb-3") }}
                                            {{ render_field(form.forum_id, div_class="mb-3") }}
                                            {{ render_field(form.state, div_class="mb-3") }}
                                        </div>
                                        <div class="col-md-6">
                                            {{ render_field(form.author, div_class="mb-3") }}
                                            {{ render_field(form.date_from, div_class="mb-3") }}
                                            {{ render_field(form.date_to, div_class="mb-3") }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {% if result %}
            <div class="mt-4">{% include theme("search/search_result.html") %}</div>
        {% endif %}
    </div>

    <script>
    (function() {
        var searchType = document.getElementById("{{ form.search_type.id }}");
        var toggleBtn = document.getElementById("advanced-filter-toggle");
        var toggleIcon = document.getElementById("advanced-filter-icon");
        var advanced = document.getElementById("advanced-search");
        var advancedOpen = document.getElementById("{{ form.advanced_open.id }}");

        function setIcon(open) {
            toggleIcon.classList.toggle("fa-chevron-down", !open);
            toggleIcon.classList.toggle("fa-chevron-up", open);
        }

        searchType.addEventListener("change", function() {
            var isForum = searchType.value === "forum";
            toggleBtn.classList.toggle("d-none", !isForum);
            if (!isForum) {
                advanced.classList.add("d-none");
                advancedOpen.value = "";
                setIcon(false);
            }
        });

        toggleBtn.addEventListener("click", function() {
            var willOpen = advanced.classList.contains("d-none");
            advanced.classList.toggle("d-none");
            advancedOpen.value = willOpen ? "1" : "";
            setIcon(willOpen);
        });

        setIcon(!advanced.classList.contains("d-none"));
    })();
    </script>
{% endblock %}