{% extends 'layouts/base.html' %}
{% load static %}
{% load i18n %}

{% block content %}
    <div class="uk-margin-medium-top">
        <div class="uk-container uk-flex-auto top-container uk-position-relative uk-margin-medium-top">
            <div class="uk-width-1-2@l uk-width-1-1 uk-align-center">
                <div class="uk-inline uk-width-1-1@l">
                    <h1 class="uk-text-bold uk-text-center">{% trans 'Nos services' %}</h1>
                    <p>{% trans "GnousEU propose à tous des services gratuits et libre d'utilisations à tous. Ces services sont majoritairement opensource et ne volent pas vos précieuses données personnelles." %}</p>
                </div>
            </div>
            <div class="uk-width-1-2@l uk-width-1-1 uk-align-center uk-margin-large-bottom">
                <form action="{% url 'gnous_eu:services' %}" method="get" id="searchForm">
                    <div class="uk-inline uk-width-1-1@l">
                        <button class="uk-form-icon uk-form-icon-flip uk-icon" aria-label="Search" data-uk-icon="search" type="submit"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></button>
                        <label for="searchInput">
                            <input class="uk-input" type="search" id="searchInput" name="search"
                                   placeholder="{% trans 'Rechercher...' %}" {% if search %} value="{{ search }}" {% endif %}>
                        </label>
                    </div>
                </form>
            </div>

            {% if services|length >= 1 %}
                <div class="uk-grid uk-grid-margin-medium uk-child-width-1-3@m">
                    {% for service in services %}
                        <div class="uk-margin-bottom">
                            <div class="uk-card uk-card-secondary">
                                <div class="uk-card-media-top">
                                    <a href="https://{{ service.domain }}" target="_blank">
                                        <img src="{{ service.photo.url }}" loading="lazy" alt="{{ service.name }}" width="320" height="240">
                                    </a>
                                </div>
                                <div class="uk-card-body">
                                    <h3 class="uk-card-title uk-margin-remove-bottom">
                                        <a href="https://{{ service.domain }}"target="_blank">{{ service.name }}</a>
                                    </h3>
                                    <code>{{ service.domain }}</code>

                                    <p>{% get_current_language as LANGUAGE_CODE %}{% if LANGUAGE_CODE == 'en' and service.description_en != None %}{{ service.description_en }}{% else %}{{ service.description }}{% endif %}</p>
                                    <a href="https://{{ service.domain }}" class="uk-text-large" target="_blank">{% trans "Rejoindre !" %}</a>
                                </div>
                                <div class="uk-card-footer uk-card-media">
                                    {% if service.sources == 'CLOSED' %}
                                        <span class="uk-label uk-label-warning">{% trans service.get_sources_display %}</span>
                                    {% elif service.sources == 'OPEN' %}
                                        <span class="uk-label uk-label-success">{% trans service.get_sources_display %}</span>
                                    {% else %}
                                        <span class="uk-label">{% trans service.get_sources_display %}</span>
                                    {% endif %}

                                    {% if service.hosted == 'CENT' %}
                                        <span class="uk-label uk-label-warning">{% trans service.get_hosted_display %}</span>
                                    {% elif service.hosted == 'FED' %}
                                        <span class="uk-label uk-label-success">{% trans service.get_hosted_display %}</span>
                                    {% else %}
                                        <span class="uk-label">{% trans service.get_hosted_display %}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <ul class="uk-pagination uk-margin-medium-top">
                    <li class="uk-width-1-3">
                        {% if services.has_previous %}
                            <a {% if search %}
                                href="?search={{ search }}&page={{ services.previous_page_number }}"
                            {% else %}
                                href="?page={{ services.previous_page_number }}"
                            {% endif %} class="uk-button">
                                <span class="uk-margin-small-right" data-uk-pagination-previous></span> {% trans "Précédent" %}
                            </a>
                        {% endif %}
                    </li>
                    <li class="uk-width-1-3">
                        <span class="uk-button">{{ services.number }}/{{ services.paginator.num_pages }}</span>
                    </li>

                    <li class="uk-width-1-3">
                        {% if services.has_next %}
                            <a {% if search %}
                                href="?search={{ search }}&page={{ services.next_page_number }}"
                            {% else %}
                                href="?page={{ services.next_page_number }}"
                            {% endif %} class="uk-button">
                                {% trans "Suivant" %} <span class="uk-margin-small-left" data-uk-pagination-next></span>
                            </a>
                        {% endif %}
                    </li>
                </ul>
            {% else %}
                <div class="uk-width-2-3@m uk-align-center">
                    <div class="uk-card">
                        <div class="uk-card-header">
                            <div class="uk-grid-small uk-flex-middle uk-grid">
                                <div class="uk-width-2-3">
                                    <h3 class="uk-card-title uk-text-bold uk-text-danger">{% trans "Aucun service trouvé pour la recheche: " %}</h3>
                                    <p class="uk-margin-large">{{ search }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        window.searchForm = document.getElementById('searchForm');
        window.searchInputearch = searchForm.querySelector('input#searchInput');

        searchInputearch.addEventListener('keypress', e => {
            if (e.which === 13) {
                searchForm.submit();
            }
        });
    </script>
{% endblock %}