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

{% get_current_language as LANGUAGE_CODE %}

{% block main %}

<div id="corpus-text-list">

    <!-- List Options  -->
    <section>

        <div id="corpus-text-list-options-toggler">
            <!-- Inactive (show left arrow, to signal sliding out) -->
            <div id="corpus-text-list-options-toggler-active">
                <i class="fas fa-search"></i>
            </div>
            <!-- Active (show right arrow, to signal sliding in) -->
            <div id="corpus-text-list-options-toggler-inactive">
                <i class="fas fa-search"></i>
            </div>
        </div>

        <form method="GET" id="corpus-text-list-options">
            <a id="corpus-text-list-options-extlink" href="{% url 'general:about-search' %}">{% translate 'How to Search' %} <i class="fas fa-question-circle"></i></a>
            <a id="corpus-text-list-options-extlink" href="{% url 'corpus:map-iedctoponyms' %}">{% translate 'Search by Map' %} <i class="fas fa-map-marker-alt"></i></a>

            <!-- Search (allows for multiple search criteria) -->
            <div id="corpus-text-list-options-search">
                <!-- Hidden fields that will have value determined in JS -->
                <input type="hidden" id="corpus-text-list-options-search-values" name="search">
                <input type="hidden" id="corpus-text-list-options-search-operator" name="search_operator">
                <input type="hidden" id="corpus-text-list-options-search-type" name="search_type">
                <!-- Regex search toggle button -->
                <div id="corpus-text-list-options-search-type">
                    <strong>{% translate 'Search type' %}:</strong>
                    <!-- Buttons -->
                    <div id="corpus-text-list-options-search-type-general" class="corpus-text-list-options-search-type-button{% if LANGUAGE_CODE == 'fa' %} rtl{% endif %}" title="{% translate 'Search using keywords' %}" data-type="">{% translate 'General' %}</div><!--
                    --><div id="corpus-text-list-options-search-type-regex" class="corpus-text-list-options-search-type-button{% if LANGUAGE_CODE == 'fa' %} rtl{% endif %}" title="{% translate 'Search using regular expressions' %}" data-type="regex">{% translate 'RegEx' %}</div>
                    <!-- Info link -->
                    <a href="{% url 'general:about-search' %}#about-search-type"><i class="fas fa-info-circle"></i></a>
                </div>
                <!-- Search fields (dynamically filled via JS) -->
                <div id="corpus-text-list-options-search-fields"></div>
                <!-- Add new search field instance -->
                <div id="corpus-text-list-options-search-addinstance" title="Add search box"><i class="fas fa-plus"></i></div>
            </div>

            <!-- Includes (aka checkbox filters) -->
            <div class="corpus-text-list-options-section">
                <div class="corpus-text-list-options-section-title">
                    <i class="fas fa-check-square"></i> {% translate 'Includes' %}
                    {% include 'corpus/snippets/options-section-title-toggle.html' %}
                </div>
                <div id="corpus-text-list-options-includes" class="corpus-text-list-options-section-content">
                    {% for f in options_includes %}
                        <label{% if f.filter_helptext %} title="{{ f.filter_helptext }}"{% endif %}><input type="checkbox" class="corpus-text-list-options-includes-filter" id="{{ f.filter_id }}" title="{{ f.filter_name }}" name="{{ f.filter_id }}"> {% if LANGUAGE_CODE == 'en' %}{{ f.filter_name }}{% elif LANGUAGE_CODE == 'fa' %}{{ f.filter_name_fa }}{% endif %}</label>
                    {% endfor %}
                </div>
            </div>

            <!-- Dates (range of "from - to" by year) -->
            <div class="corpus-text-list-options-section">
                <div class="corpus-text-list-options-section-title">
                    <i class="fas fa-clock"></i> {% translate 'Dates (CE)' %}
                    {% include 'corpus/snippets/options-section-title-toggle.html' %}
                </div>
                <div id="corpus-text-list-options-datefilters">
                    {% include 'corpus/snippets/list-filters.html' with filters=options_datefilters %}
                </div>
            </div>

            <!-- Filter -->
            <div class="corpus-text-list-options-section">
                <div class="corpus-text-list-options-section-title">
                    <i class="fas fa-sliders-h"></i> {% translate 'Filters' %}
                    {% include 'corpus/snippets/options-section-title-toggle.html' %}
                </div>
                <div id="corpus-text-list-options-filters">
                    {% include 'corpus/snippets/list-filters.html' with filters=options_filters %}
                </div>
            </div>

            <!-- Sort -->
            <!-- Hidden, as this option is elsewhere on the page -->
            <input type="hidden" id="corpus-text-list-options-sort" name="sort" value="">
        </form>
    </section>

    <!-- List Header -->
    <section id="corpus-text-list-header">
        <!-- Results title -->
        <div id="corpus-text-list-header-title">{% translate 'Results' %}</div>
        <!-- Results count -->
        <div id="corpus-text-list-header-count">
            {{ page_obj.paginator.count }} {% translate 'results found' %} {% if page_obj.paginator.count != count_all_texts %}<a class="reset-form" href="#">{% translate 'of all' %} {{ count_all_texts }} {% translate 'Corpus Texts' %}</a>{% endif %}
        </div>
        <!-- Sort -->
        <div id="corpus-text-list-header-sort">
            <label for="corpus-text-list-header-sort-select">{% translate 'Sort by' %}:</label>
            <select id="corpus-text-list-header-sort-select" name="sort">
                {% if options_sort|length > 0 %}
                    {% for os in options_sort %}
                        <option value="{{ os.value }}">
                            {% if LANGUAGE_CODE == 'fa' %}{{ os.label_fa }}{% else %}{{ os.label }}{% endif %}
                        </option>
                    {% endfor %}
                {% endif %}
            </select>
        </div>
        <!-- Download Data -->
        {% include 'corpus/snippets/downloaddata.html' with data_description='all texts in the search results' %}
    </section>

    <section id="corpus-text-list-searchcriteria">
        <!-- Filled in dynamically via JS -->
        <div id="corpus-text-list-searchcriteria-content"></div>
    </section>

    <!-- List Items -->
    <section id="corpus-text-list-items">
        {% for object in object_list %}
            <!-- Set the URL based on the main model supplied to this page -->
            <a href="{% url 'corpus:text-detail' object.id %}" class="corpus-text-list-items-item" target="_blank">
                <!-- Image -->
                <div class="corpus-text-list-items-item-imagecontainer" style="background-image: url({% if object.list_image_url %}{{ object.list_image_url }}{% else %}{% static 'images/noimagefound.jpg' %}{% endif %}); background-color: #CCC; background-position: center; background-repeat: no-repeat; background-size: cover;">
                </div>
                <!--Text -->
                <div class="corpus-text-list-items-item-text">
                    <div class="corpus-text-list-items-item-text-meta {% if LANGUAGE_CODE == 'en' %}right{% elif LANGUAGE_CODE == 'fa' %}left{% endif %}">
                        {% translate 'In IEDC since' %} {{ object.meta_created_datetime | date:"d M o" }} (IEDCID{{ object.id }})
                    </div>
                    <div class="corpus-text-list-items-item-text-title">
                        <span class="corpus-text-list-items-item-text-title-count">{{ forloop.counter0|add:start_count }}</span> {{ object.title }}
                    </div>
                    <div class="corpus-text-list-items-item-text-details">
                        {% if object.summary_of_content %}
                            <div class="corpus-text-list-items-item-text-details-summary" dir="ltr">{{ object.summary_of_content_preview }}</div>
                        {% endif %}
                        <dl>
                            <div><dt>{% translate 'Primary Language' %}</dt><dd>{% if object.primary_language %}{{ object.primary_language }}{% else %}{% translate 'Unknown' %}{% endif %}</dd></div>
                            <div><dt>{% translate 'Type' %}</dt><dd>{% if object.type %}{{ object.type }}{% else %}{% translate 'Unknown' %}{% endif %}</dd></div>
                            <div><dt>{% translate 'Writing Support' %}</dt><dd>{% if object.writing_support %}{{ object.writing_support | title }}{% else %}{% translate 'Unknown' %}{% endif %}</dd></div>
                            <div><dt>{% translate 'Dates (CE)' %}</dt><dd>{% if object.gregorian_date_listview %}{{ object.gregorian_date_listview }}{% else %}{% translate 'Unknown' %}{% endif %}</dd></div>
                        </dl>
                    </div>
                    {% if object.tags %}
                        <div class="corpus-text-list-items-item-text-tags">
                            <strong>{% translate 'Tags' %}: </strong>
                            {% for tag in object.tags %}
                                <span class="corpus-text-list-items-item-text-tags-tag" data-tagid="{{ tag.id }}">{{ tag.name }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <!-- Booleans -->
                <div class="corpus-text-list-items-item-booleans {% if LANGUAGE_CODE == 'fa' %}rtl{% else %}ltr{% endif %}">
                    <span{% if object.has_transcription %} class="active"><i class="fas fa-check-circle"></i>{% else %}><i class="fas fa-times-circle"></i>{% endif %} {% translate 'Transcription' %}</span>
                    <span{% if object.has_translation %} class="active"><i class="fas fa-check-circle"></i>{% else %}><i class="fas fa-times-circle"></i>{% endif %} {% translate 'Translation' %}</span>
                    <span{% if object.has_transliteration %} class="active"><i class="fas fa-check-circle"></i>{% else %}><i class="fas fa-times-circle"></i>{% endif %} {% translate 'Transliteration' %}</span>
                </div>
                {% if not object.public_review_approved %}
                    <!-- Not Yet Approved -->
                    <div class="corpus-text-list-items-item-notyetapproved" title="This text is not visible to public users">
                        <i class="fas fa-exclamation-triangle"></i> {% translate 'Not yet approved' %}
                    </div>
                {% endif %}
            </a>
        {% empty %}
            <div class="corpus-text-list-items-empty">
                <div class="corpus-text-list-items-empty-title">
                    No Corpus Texts Found
                </div>
                <div class="corpus-text-list-items-empty-details">
                    <p>
                        Try expanding your search criteria or <a class="reset-form" href="#">view all Corpus Texts</a>
                    </p>
                </div>
            </div>
        {% endfor %}
    </section>

    <!-- List Pagination, if there are multiple pages -->
    {% if page_obj.paginator.num_pages > 1 %}
        <section id="corpus-text-list-pagination" dir="ltr" class="container">
            <!-- Backwards -->
            <div class="corpus-text-list-pagination-section">
                {% if page_obj.has_previous %}
                    <!-- First Page -->
                    <div class="corpus-text-list-pagination-action">
                        <a href="{% pagination_go_to_page page_number=1 %}">
                            <i class="fas fa-angle-double-left"></i> {% translate 'First' %}
                        </a>
                    </div>
                    <!-- Previous Page -->
                    <div class="corpus-text-list-pagination-action">
                        <a href="{% pagination_go_to_page page_number=page_obj.previous_page_number %}">
                            <i class="fas fa-angle-left"></i> {% translate 'Previous' %}
                        </a>
                    </div>
                {% endif %}
            </div>
            <!-- Current page -->
            <div class="corpus-text-list-pagination-section">
                <span class="corpus-text-list-pagination-current">
                    {% translate 'Page' %}
                    <input id="corpus-text-list-pagination-current-pageselector" type="number" title="page" value="{{ page_obj.number }}" max="{{ page_obj.paginator.num_pages }}" min="1">
                    {% translate 'of' %}
                    {{ page_obj.paginator.num_pages }}
                </span>
            </div>
            <!-- Forwards -->
            <div class="corpus-text-list-pagination-section">
                {% if page_obj.has_next %}
                    <!-- Next Page -->
                    <div class="corpus-text-list-pagination-action">
                        <a href="{% pagination_go_to_page page_number=page_obj.next_page_number %}">
                            {% translate 'Next' %} <i class="fas fa-angle-right"></i>
                        </a>
                    </div>
                    <!-- Last Page -->
                    <div class="corpus-text-list-pagination-action">
                        <a href="{% pagination_go_to_page page_number=page_obj.paginator.num_pages %}">
                            {% translate 'Last' %} <i class="fas fa-angle-double-right"></i>
                        </a>
                    </div>
                {% endif %}
            </div>
        </section>
    {% endif %}

</div>


<!-- JS -->
<script>
    $(document).ready(function(){
        {% include "corpus/js/list.js" %}
    });
</script>

{% endblock %}