{% extends "base.html" %}

{% block title %}{{ database }}: {{ table }}: {% if filtered_table_rows_count or filtered_table_rows_count == 0 %}{{ "{:,}".format(filtered_table_rows_count) }} row{% if filtered_table_rows_count == 1 %}{% else %}s{% endif %}{% endif %}{% if human_description_en %} {{ human_description_en }}{% endif %}{% endblock %}

{% block extra_head %}
{{- super() -}}
<script src="{{ urls.static('table.js') }}" defer></script>
<script>DATASETTE_ALLOW_FACET = {{ datasette_allow_facet }};</script>
<style>
@media only screen and (max-width: 576px) {
{% for column in display_columns -%}
    .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: "{{ column.name|escape_css_string }}"; }
{% endfor %}}
</style>
{% endblock %}

{% block body_class %}table db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}

{% block nav %}
    <p class="crumbs">
        <a href="{{ urls.instance() }}">home</a> /
        <a href="{{ urls.database(database) }}">{{ database }}</a>
    </p>
    {{ super() }}
{% endblock %}

{% block content %}
<div class="page-header" style="border-color: #{{ database_color(database) }}">
    <h1>{{ metadata.title or table }}{% if is_view %} (view){% endif %}{% if private %} 🔒{% endif %}</h1>
    {% set links = table_actions() %}{% if links %}
    <details class="actions-menu-links">
        <summary><svg aria-labelledby="actions-menu-links-title" role="img"
                style="color: #666" xmlns="http://www.w3.org/2000/svg"
                width="28" height="28" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <title id="actions-menu-links-title">Table actions</title>
            <circle cx="12" cy="12" r="3"></circle>
            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg></summary>
        <div class="dropdown-menu">
            {% if links %}
            <ul>
                {% for link in links %}
                <li><a href="{{ link.href }}">{{ link.label }}</a></li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
    </details>{% endif %}
</div>

{% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}

{% if metadata.columns %}
<dl class="column-descriptions">
    {% for column_name, column_description in metadata.columns.items() %}
        <dt>{{ column_name }}</dt><dd>{{ column_description }}</dd>
    {% endfor %}
</dl>
{% endif %}

{% if filtered_table_rows_count or human_description_en %}
    <h3>{% if filtered_table_rows_count or filtered_table_rows_count == 0 %}{{ "{:,}".format(filtered_table_rows_count) }} row{% if filtered_table_rows_count == 1 %}{% else %}s{% endif %}{% endif %}
        {% if human_description_en %}{{ human_description_en }}{% endif %}
    </h3>
{% endif %}

<form class="filters" action="{{ urls.table(database, table) }}" method="get">
    {% if supports_search %}
        <div class="search-row"><label for="_search">Search:</label><input id="_search" type="search" name="_search" value="{{ search }}"></div>
    {% endif %}
    {% for column, lookup, value in filters.selections() %}
        <div class="filter-row">
            <div class="select-wrapper">
                <select name="_filter_column_{{ loop.index }}">
                    <option value="">- remove filter -</option>
                    {% for c in filter_columns %}
                          <option{% if c == column %} selected{% endif %}>{{ c }}</option>
                    {% endfor %}
                </select>
            </div><div class="select-wrapper filter-op">
                <select name="_filter_op_{{ loop.index }}">
                    {% for key, display, no_argument in filters.lookups() %}
                        <option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
                    {% endfor %}
                </select>
            </div><input type="text" name="_filter_value_{{ loop.index }}" class="filter-value" value="{{ value }}">
        </div>
    {% endfor %}
    <div class="filter-row">
        <div class="select-wrapper">
            <select name="_filter_column">
                <option value="">- column -</option>
                {% for column in filter_columns %}
                      <option>{{ column }}</option>
                {% endfor %}
            </select>
        </div><div class="select-wrapper filter-op">
            <select name="_filter_op">
                {% for key, display, no_argument in filters.lookups() %}
                    <option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
                {% endfor %}
            </select>
        </div><input type="text" name="_filter_value" class="filter-value">
    </div>
    <div class="filter-row">
        {% if is_sortable %}
            <div class="select-wrapper small-screen-only">
                <select name="_sort" id="sort_by">
                    <option value="">Sort...</option>
                    {% for column in display_columns %}
                        {% if column.sortable %}
                            <option value="{{ column.name }}"{% if column.name == sort or column.name == sort_desc %} selected{% endif %}>Sort by {{ column.name }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
            <label class="sort_by_desc small-screen-only"><input type="checkbox" name="_sort_by_desc"{% if sort_desc %} checked{% endif %}> descending</label>
        {% endif %}
        {% for key, value in form_hidden_args %}
            <input type="hidden" name="{{ key }}" value="{{ value }}">
        {% endfor %}
        <input type="submit" value="Apply">
    </div>
</form>

{% if extra_wheres_for_ui %}
<div class="extra-wheres">
    <h3>{{ extra_wheres_for_ui|length }} extra where clause{% if extra_wheres_for_ui|length != 1 %}s{% endif %}</h3>
    <ul>
    {% for extra_where in extra_wheres_for_ui %}
        <li><code>{{ extra_where.text }}</code> [<a href="{{ extra_where.remove_url }}">remove</a>]</li>
    {% endfor %}
    </ul>
</div>
{% endif %}

{% if query.sql and allow_execute_sql %}
    <p><a class="not-underlined" title="{{ query.sql }}" href="{{ urls.database(database) }}?{{ {'sql': query.sql}|urlencode|safe }}{% if query.params %}&amp;{{ query.params|urlencode|safe }}{% endif %}">&#x270e; <span class="underlined">View and edit SQL</span></a></p>
{% endif %}

<p class="export-links">This data as {% for name, url in renderers.items() %}<a href="{{ url }}">{{ name }}</a>{{ ", " if not loop.last }}{% endfor %}{% if display_rows %}, <a href="{{ url_csv }}">CSV</a> (<a href="#export">advanced</a>){% endif %}</p>

{% if suggested_facets %}
    {% include "_suggested_facets.html" %}
{% endif %}

{% if facets_timed_out %}
    <p class="facets-timed-out">These facets timed out: {{ ", ".join(facets_timed_out) }}</p>
{% endif %}

{% if facet_results %}
    {% include "_facet_results.html" %}
{% endif %}

{% include custom_table_templates %}

{% if next_url %}
     <p><a href="{{ next_url }}">Next page</a></p>
{% endif %}

{% if display_rows %}
    <div id="export" class="advanced-export">
        <h3>Advanced export</h3>
        <p>JSON shape:
            <a href="{{ renderers['json'] }}">default</a>,
            <a href="{{ append_querystring(renderers['json'], '_shape=array') }}">array</a>,
            <a href="{{ append_querystring(renderers['json'], '_shape=array&_nl=on') }}">newline-delimited</a>{% if primary_keys %},
                <a href="{{ append_querystring(renderers['json'], '_shape=object') }}">object</a>
            {% endif %}
        </p>
        <form action="{{ url_csv_path }}" method="get">
            <p>
                CSV options:
                <label><input type="checkbox" name="_dl"> download file</label>
                {% if expandable_columns %}<label><input type="checkbox" name="_labels" checked> expand labels</label>{% endif %}
                {% if next_url and settings.allow_csv_stream %}<label><input type="checkbox" name="_stream"> stream all rows</label>{% endif %}
                <input type="submit" value="Export CSV">
                {% for key, value in url_csv_hidden_args %}
                    <input type="hidden" name="{{ key }}" value="{{ value }}">
                {% endfor %}
            </p>
        </form>
    </div>
{% endif %}

{% if table_definition %}
    <pre class="wrapped-sql">{{ table_definition }}</pre>
{% endif %}

{% if view_definition %}
    <pre class="wrapped-sql">{{ view_definition }}</pre>
{% endif %}

{% endblock %}