{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}{% trans 'Settings' %}{% endblock %}

{% block extra_head %}
    {{ search_form.media }}
{% endblock %}


{% block content %}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'view_settings' %}">{% trans 'Settings' %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans 'Search' %}</li>
        </ol>
    </nav>

    <div class="tab-pane {% if active_tab == 'search' %} active {% endif %}" id="search" role="tabpanel"
         aria-labelledby="search-tab">
        <h4>{% trans 'Search Settings' %}</h4>
        {% trans 'There are many options to configure the search depending on your personal preferences.' %}
        {% trans 'Usually you do <b>not need</b> to configure any of them and can just stick with either the default or one of the following presets.' %}
        {% trans 'If you do want to configure the search you can read about the different options <a href="/docs/search/">here</a>.' %}

        <div class="card-deck mt-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{% trans 'Fuzzy' %}</h5>
                    <p class="card-text">{% trans 'Find what you need even if your search or the recipe contains typos. Might return more results than needed to make sure you find what you are looking for.' %}</p>
                    <p class="card-text"><small class="text-muted">{% trans 'This is the default behavior' %}</small>
                    </p>
                    <button class="btn btn-primary card-link"
                            onclick="applyPreset('fuzzy')">{% trans 'Apply' %}</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{% trans 'Precise' %}</h5>
                    <p class="card-text">{% trans 'Allows fine control over search results but might not return results if too many spelling mistakes are made.' %}</p>
                    <p class="card-text"><small class="text-muted">{% trans 'Perfect for large Databases' %}</small></p>
                    <button class="btn btn-primary card-link"
                            onclick="applyPreset('precise')">{% trans 'Apply' %}</button>
                </div>
            </div>

        </div>

        <hr/>
        <form action="./#search" method="post" id="id_search_form">
            {% csrf_token %}
            {{ search_form|crispy }}
            <button class="btn btn-success" type="submit" name="search_form" id="search_form_button"><i
                    class="fas fa-save"></i> {% trans 'Save' %}</button>
        </form>
    </div>



    <script type="application/javascript">
        $(function () {
            $('#id_search-trigram_threshold').get(0).type = 'range';
        });

        function applyPreset(preset) {
            $('#id_search-preset').val(preset);
            $('#id_search-search').val('plain');
            $('#search_form_button').click();
        }
    </script>
{% endblock %}