{% 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" data-uk-icon="search" type="submit"></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 %}
                <ul class="uk-grid uk-grid-margin-medium uk-child-width-1-3@m" data-uk-grid="masonry: true">
                    {% for service in services %}
                        <li>
                            <div class="uk-card uk-card-default">
                                <div class="uk-card-media-top">
                                    <img src="https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif"
                                         data-src="{{ service.photo.url }}"
                                         data-uk-img
                                         alt="{{ service.name }}">
                                </div>
                                <div class="uk-card-body">
                                    <h3 class="uk-card-title">
                                        {{ service.name }}
                                        <a class="uk-text-small uk-link-muted uk-margin-left" href="https://{{ service.domain }}">{{ service.domain }}</a>
                                    </h3>
                                    <p>{{ service.description }}</p>
                                </div>
                                <div class="uk-card-footer">
                                    {% if service.sources == 'CLOSED' %}
                                        <span class="uk-label uk-label-warning">{{ service.get_sources_display }}</span>
                                    {% elif service.sources == 'OPEN' %}
                                        <span class="uk-label uk-label-success">{{ service.get_sources_display }}</span>
                                    {% else %}
                                        <span class="uk-label">{{ service.get_sources_display }}</span>
                                    {% endif %}

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

                <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 %}