{% extends 'base.html' %}
{% load i18n %}
{% load helper_tags %}
{% get_current_language as LANGUAGE_CODE %}
{% block languagecode %}
    {{ LANGUAGE_CODE }}
{% endblock languagecode %}
{% block title %}
    {% translate "cscherr.de" %} - {% translate "Blog" %}
{% endblock title %}
{% block blockname %}
{% endblock blockname %}
{% block nav %}
    {% include 'nav.html' %}
{% endblock nav %}
{% block main %}
    <div class="container-fluid">
        <div class="row mb-5">
            <div class="col col-xxl mb-5" id="headline">
                <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
                   href="{% url "blog:browse" %}"
                   style="display: inline-block">
                    <h1 class="display-1 w-0">Browse</h1>
                </a>
                {# center headline on small screens #}
                <script>
                    if (screen.width < 480) {
                        col = document.getElementById("headline")
                        col.classList.add("text-center")
                    };
                </script>
            </div>
            <div class="col-sm-3">
                <div class="container-fluid w-100 h-100 p-2">
                    <form class="w-100 h-100"
                          role="search"
                          action=""
                          method="GET"
                          novalidate
                          id="filter-form">
                        <div class="py-2">
                            <input type="search"
                                   name="search"
                                   class="form-control flex-fill py-2"
                                   defaultValue=""
                                   aria-label="Search"
                                   placeholder="{% trans "Search" %}"
                                   required=""
                                   {% if filters.search %}value="{{ filters.search }}"{% endif %}
                                   id="id_search">
                        </div>
                        <div class="py-2">
                            <select class="form-select py-2"
                                    aria-label="Large select example"
                                    defaultValue=""
                                    name="category">
                                <option value="">{% trans "select category" %}</option>
                                {% for category in categories %}
                                    <option {% if filters.category.slug == category.slug %}selected{% endif %}
                                            value="{{ category.slug }}">{{ category.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="py-2">
                            <input class="tagify"
                                   name="keywords"
                                   defaultValue=""
                                   placeholder="{% trans "Keywords" %}"
                                   {% if filters.keywords %} value="{% for keyword in filters.keywords %}{{ keyword }} {% endfor %}
                                   "
                                   {% endif %}>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="py-2">
                                    <!-- will reset to the filters encoded in
                                        the url by GET attributes, not to the empty
                                        form. -->
                                    <input type="reset"
                                           class="btn bg-primary fw-bold py-2 float-end w-100 reset-empty-button">
                                </div>
                            </div>
                            <div class="col">
                                <div class="py-2">
                                    <button id="filter-button"
                                            class="btn bg-primary fw-bold py-2 float-end w-100"
                                            type="submit">{% trans "Filter" %}</button>
                                </div>
                            </div>
                        </div>
                        <script>
                            var input = document.querySelector('input[class=tagify]');
                            new Tagify(input, {
                                originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(','),
                                enforceWhitelist: true,
                                whitelist : [{% for keyword in keywords %}'{{ keyword.slug | safe }}', {% endfor %}],
                                dropdown : {
                                    classname     : "tagify-dropdown", // TODO: style better
                                    enabled       : 1,              // show the dropdown immediately on focus
                                    maxItems      : 5,
                                    position      : "text",         // place the dropdown near the typed text
                                    closeOnSelect : false,          // keep the dropdown open after selecting a suggestion
                                    highlightFirst: true
                                }
                            })
                        </script>
                    </form>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="container-fluid p-0 w-100 h-100">
                {% if not posts %}
                    <div class="text-center">
                        <img src="/media/img/http/404.svg"
                             class="img-fluid pb-5 pt-2 darkmode-invert"
                             style="max-height: 650px"
                             alt="404" />
                        <h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
                    </div>
                {% else %}
                    <div class="row gap-3 cardrow">
                        {% for post in posts %}
                            <div class="card col mx-auto my-2 py-2">
                                <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
                                   href=" {% url 'blog:post' post.category.slug post.slug %}">
                                    <img src="{{ post.thumbnail.url }}"
                                         class="card-img-top img-fluid mx-auto d-block"
                                         style="max-height: 150px;
                                                width: auto;
                                                padding-top: 8px"
                                         alt="thumbnail" />
                                    <div class="card-body" style="height: 100px">
                                        {% if LANGUAGE_CODE == "de" %}
                                            <h5 class="card-title">
                                                {{ post.title_de }}<small class="text-body-secondary">{{ post.subtitle }}</small>
                                            </h5>
                                            <p class="card-text">{{ post.desc_de }}</p>
                                        {% elif LANGUAGE_CODE == "en" %}
                                            <h5 class="card-title">
                                                {{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small>
                                            </h5>
                                            <p class="card-text">{{ post.desc_en }}</p>
                                        {% else %}
                                            <h5 class="card-title">
                                                {{ post.title_en }}<small class="text-body-secondary">{{ post.subtitle }}</small>
                                            </h5>
                                            <p class="card-text">{{ post.desc_en }}</p>
                                        {% endif %}
                                    </div>
                                    <div class="container pt-5">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">
                                                {% translate "category" %}: <b>{{ post.category.name }}</b>
                                            </li>
                                            {% for keyword in post.keywords.all %}
                                                {% if LANGUAGE_CODE == "de" %}
                                                    <li class="list-group-item">{{ keyword.text_de }}</li>
                                                {% elif LANGUAGE_CODE == "en" %}
                                                    <li class="list-group-item">{{ keyword.text_en }}</li>
                                                {% else %}
                                                    <li class="list-group-item">{{ keyword.text_en }}</li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                    <div class="container p-1 text-center" style="border-top: solid">
                                        <li class="list-group-item">
                                            {% format_time post.date "%F" as date %}
                                            {% trans "published" %}: {{ date }}
                                        </li>
                                    </div>
                                </a>
                            </div>
                            {% empty %}
                        {% endfor %}
                    </div>
                    <nav aria-label="Page navigation example" class="mt-5">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% query_transform page=1 %}">First</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link"
                                       href="?{% query_transform page=page_obj.previous_page_number %}">{{ page_obj.previous_page_number }}</a>
                                </li>
                            {% endif %}
                            <li class="page-item">
                                <a class="page-link" href="">{{ page_obj.number }}</a>
                            </li>
                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="?{% query_transform page=page_obj.next_page_number %}">{{ page_obj.next_page_number }}</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link"
                                       href="?{% query_transform page=page_obj.paginator.num_pages %}">Last</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock main %}
