{% extends "base.html" %}
{% load humanize %}
{% load i18n %}
{% load static %}
{% load smart_pagination %}
{% block title %}{% translate "Browse" %}{% endblock %}
{% block content %}
    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-9">
            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <h1>
                            {% if request.GET.search %}
                                {% blocktrans with search=request.GET.search %}Search results for '{{ search }}'...
                                {% endblocktrans %}
                            {% else %}
                                {% translate "Browse all items" %}
                            {% endif %}
                        </h1>
                    </div>
                    <div class="row">
                <span>
                    {% blocktranslate with count=page_obj.paginator.count %}
                        {{ count }} item(s) found
                    {% endblocktranslate %}
                </span>
                    </div>
                </div>
                <div class="col-6 justify-content-end align-items-end d-flex">
                    <div class="dropdown">
                        <button type="button"
                                class="btn btn-outline-accent dropdown-toggle {% if 'content_type' in request.GET or 'state' in request.GET %}active{% endif %}"
                                data-bs-toggle="dropdown"
                                aria-expanded="false" data-bs-auto-close="outside">
                            <i class="fa fa-filter fa-fw"></i> {% translate "Filter" %}
                        </button>
                        <div class="dropdown-menu dropdown-menu-end text-nowrap p-0">
                            <form method="GET" class="px-4 py-1">
                                {% if request.GET.search %}
                                    <input type="hidden" name="search" value="{{ request.GET.search }}">
                                {% endif %}
                                <h6 class="dropdown-header px-0">{% translate "Status" %}</h6>
                                <div class="mb-1">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input"
                                               id="secretsFilterStatusRegular" name="status" value="1"
                                               {% if not filter.form.cleaned_data.status or '1' in filter.form.cleaned_data.status %}checked{% endif %}>
                                        <label class="form-check-label" for="secretsFilterStatusRegular">
                                            <i class="fa fa-key fa-fw"></i> {% translate "Regular" %}
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-1">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input"
                                               id="secretsFilterStatusNeedsChanging" name="status" value="2"
                                               {% if not filter.form.cleaned_data.status or '2' in filter.form.cleaned_data.status %}checked{% endif %}>
                                        <label class="form-check-label" for="secretsFilterStatusNeedsChanging">
                                            <i class="fa fa-refresh fa-fw text-danger"></i> {% translate "Needs changing" %}
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-1">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input"
                                               id="secretsFilterStatusDeleted" name="status" value="3"
                                               {% if not filter.form.cleaned_data.status and not request.user.profile.hide_deleted_secrets|default_if_none:True or '3' in filter.form.cleaned_data.status %}checked{% endif %}>
                                        <label class="form-check-label" for="secretsFilterStatusDeleted">
                                            <i class="fa fa-trash-can fa-fw text-danger"></i>
                                            {% translate "Deleted" %}
                                        </label>
                                        <i class="fa fa-exclamation-circle fa-fw opacity-75" data-bs-toggle="tooltip"
                                           data-bs-placement="top"
                                           title="{% translate "Hide deleted secrets per default by changing your settings." %}"></i>
                                    </div>
                                    <hr class="dropdown-divider">
                                    <h6 class="dropdown-header px-0">{% translate "Type" %}</h6>
                                    <div class="mb-1">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input"
                                                   id="secretsFilterTypePassword" name="content_type" value="1"
                                                   {% if not filter.form.cleaned_data.content_type or '1' in filter.form.cleaned_data.content_type %}checked{% endif %}>
                                            <label class="form-check-label" for="secretsFilterTypePassword">
                                                <i class="fa fa-key fa-fw"></i> {% translate "Password" %}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input"
                                                   id="secretsFilterTypeCC" name="content_type" value="2"
                                                   {% if not filter.form.cleaned_data.content_type or '2' in filter.form.cleaned_data.content_type %}checked{% endif %}>
                                            <label class="form-check-label" for="secretsFilterTypeCC">
                                                <i class="fa fa-credit-card fa-fw"></i> {% translate "Credit Card" %}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input"
                                                   id="secretsFilterTypeFile" name="content_type" value="3"
                                                   {% if not filter.form.cleaned_data.content_type or '3' in filter.form.cleaned_data.content_type %}checked{% endif %}>
                                            <label class="form-check-label" for="secretsFilterTypeFile">
                                                <i class="fa fa-file fa-fw"></i> {% translate "File" %}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mt-3 text-end">
                                        <button class="btn btn-outline-accent btn-sm" type="submit">
                                            {% translate "Apply filter" %}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3 mx-0">
                <div class="col-12">
                    <div class="list-group list-group-hover">
                        {% for secret in secrets %}
                            {% include "secrets/secret_row.html" %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% include "pagination.html" %}
        </div>
    </div>
{% endblock %}
