{% extends "base.html" %}

{% block title %}{{ database }}: {{ table }}: {% if count_truncated %}{{ "{:,}".format(count - 1) }}+ rows{% elif count or count == 0 %}{{ "{:,}".format(count) }} row{% if count == 1 %}{% else %}s{% endif %}{% endif %}{% if human_description_en %} {{ human_description_en }}{% endif %}{% endblock %}

{% block extra_head %}
{{- super() -}}
<script>window._datasetteTableData = {{ table_page_data|tojson }};</script>
<script src="{{ static('column-chooser.js') }}" defer></script>
{% if table_page_data.foreignKeys %}
<script src="{{ static('autocomplete.js') }}" defer></script>
{% endif %}
{% if table_insert_ui or table_alter_ui or row_mutation_ui %}
<script src="{{ static('edit-tools-loader.js') }}" data-edit-tools-src="{{ static('edit-tools.js') }}" defer></script>
{% endif %}
<script src="{{ static('table.js') }}" defer></script>
{% if table_page_data.executeSql %}
{% include "_column_stats_loader.html" %}
{% endif %}
<script src="{{ static('table-layout.js') }}" defer></script>
<script src="{{ static('mobile-column-actions.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 crumbs %}
{{ crumbs.nav(request=request, database=database, table=table) }}
{% endblock %}

{% block recent_item %}{% with recent_type=("view" if is_view else "table"), recent_name=table, recent_title=metadata.get("title"), recent_url=urls.table(database, table) %}{% include "_recent_item.html" %}{% endwith %}{% endblock %}

{% block content %}
<div class="page-header" style="border-color: #{{ database_color }}">
    <h1>{{ metadata.get("title") or table }}{% if is_view %} (view){% endif %}{% if private %} 🔒{% endif %}</h1>
</div>
{% set action_links, action_title = actions(), "View actions" if is_view else "Table actions" %}
{% include "_action_menu.html" %}

{{ top_table() }}

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

{% if metadata.get("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 %}

{% macro pagination_links() %}
    <span class="page-position-links">
        {% if page_position %}
        <a class="page-position-first" href="{{ page_position.first_url }}">
            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>
            Back to first page
        </a>
        {% endif %}
        {% if next_url %}
        <a class="page-position-next" href="{{ next_url }}">
            Next page
            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </a>
        {% endif %}
    </span>
{% endmacro %}

{# The heading always carries the total row count; the position strip above
   the table repeats it alongside the page position #}
{% set paginated = page_position or next_url %}
{% set count_in_strip = paginated and count is not none and not count_truncated %}
{% if count or count == 0 or human_description_en %}
    <h3 class="table-summary">
        {% if count_truncated %}<span class="table-count" aria-live="polite">{{ "{:,}".format(count - 1) }}+ rows</span>
        <button type="button" class="count-all" data-count-url="{{ urls.table(database, table) }}/-/count">count all</button>
        <span class="count-error" role="alert"></span>
        {% elif count or count == 0 %}{{ "{:,}".format(count) }} row{% if count == 1 %}{% else %}s{% endif %}{% endif %}
        {% if human_description_en %}<span class="table-summary-description">{{ human_description_en }}</span>{% endif %}
    </h3>
{% endif %}

<form class="core 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 filter-controls-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 filter-controls-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 %}">{{ display }}</option>
                {% endfor %}
            </select>
        </div><input type="text" name="_filter_value" class="filter-value">
    </div>
    <div class="filter-row filter-actions-row">
        {% if is_sortable %}
            <div class="select-wrapper">
                <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"><input type="checkbox" name="_sort_by_desc" tabindex="0"{% 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 filters" tabindex="0">
        {% if clear_filters_url %}
            <a class="filters-clear" href="{{ clear_filters_url }}">Clear filters</a>
        {% endif %}
    </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 %}

<div class="table-tools">
    {% if query.sql and allow_execute_sql %}
    <a class="quiet-button view-sql-button" title="{{ query.sql }}" href="{{ urls.database(database) }}?{{ {'sql': query.sql}|urlencode|safe }}{% if query.params %}&amp;{{ query.params|urlencode|safe }}{% endif %}">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m16 18 6-6-6-6"></path>
            <path d="m8 6-6 6 6 6"></path>
        </svg>
        <span>View and edit SQL</span>
    </a>
    {% endif %}
    {% include "_export_button.html" %}
</div>
{% set export_meta = table %}
{% set export_scope = "Filtered rows" if filter_description_en else "All rows" %}
{% set export_scope_description = [filter_description_en, sort_description_en]|select|join(", ") or ("in this view" if is_view else "in this table") %}
{% set export_rows = {
    "page": display_rows|length,
    "more": true if next_url else false,
    "later": true if request.args.get("_next") else false,
    "max": settings.max_returned_rows,
    "total": count if (count is not none and not count_truncated) else none,
    "count_url": urls.table(database, table) ~ "/-/count",
} %}
{% include "_export_dialog.html" %}

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

{% if all_columns %}
<column-chooser></column-chooser>
<button class="choose-columns-mobile small-screen-only" onclick="openColumnChooser()">Choose columns</button>
<button type="button" class="column-actions-mobile small-screen-only">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <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>
    <span>Column actions</span>
</button>
<script>
window._columnChooserData = {{ {"allColumns": all_columns, "selectedColumns": display_columns|map(attribute='name')|list, "primaryKeys": primary_keys}|tojson }};
</script>
{% endif %}
{% if set_column_type_ui %}
<script>
window._setColumnTypeData = {{ set_column_type_ui|tojson }};
</script>
{% endif %}

{% if table_insert_ui %}
<div class="table-row-toolbar">
    <button type="button" class="core table-insert-row" data-table-action="insert-row">
        <svg class="row-inline-action-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect width="18" height="18" x="3" y="3" rx="2"></rect>
            <path d="M8 12h8"></path>
            <path d="M12 8v8"></path>
        </svg>
        <span>Insert row</span>
    </button>
</div>
{% endif %}

{% if paginated %}
<nav class="page-position" aria-label="Pagination"
    {% if page_position %}data-count-before-url="{{ page_position.count_before_url }}"{% endif %}
    data-page-rows="{{ display_rows|length }}"
    {% if count_in_strip %}data-total="{{ count }}"{% endif %}>
    <span class="page-position-text" aria-live="polite">
        {% if not page_position %}Rows <strong>1–{{ "{:,}".format(display_rows|length) }}</strong>{% if count_in_strip %} of <strong>{{ "{:,}".format(count) }}</strong>{% endif %}
        {% else %}
            {% if page_position.after_column %}Continuing after
                <code>{{ page_position.after_column }}</code> =
                {% if page_position.after_value is none %}<em>null</em>{% else %}<code>{{ page_position.after_value|truncate(40) }}</code>{% endif %}
            {% else %}Not the first page{% endif %}
            {% if count_in_strip %} · {{ "{:,}".format(count) }} row{% if count != 1 %}s{% endif %}{% endif %}
        {% endif %}
    </span>
    {{ pagination_links() }}
</nav>
{% endif %}

{% include custom_table_templates %}

{# A second set of buttons below the table is only worth it on a longer page #}
{% if paginated and display_rows|length >= 5 %}
<nav class="page-position page-position-footer" aria-label="Pagination">
    {{ pagination_links() }}
</nav>
{% endif %}

{% if table_definition %}
<details class="table-schema">
    <summary>Table schema</summary>
    <pre class="wrapped-sql">{{ table_definition }}</pre>
</details>
{% endif %}

{% if view_definition %}
<details class="table-schema">
    <summary>View definition</summary>
    <pre class="wrapped-sql">{{ view_definition }}</pre>
</details>
{% endif %}

{% if allow_execute_sql and query.sql %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const countLink = document.querySelector('a.count-sql');
    if (countLink) {
        countLink.addEventListener('click', async function(ev) {
            ev.preventDefault();
            // Replace countLink with span with same style attribute
            const span = document.createElement('span');
            span.textContent = 'counting...';
            span.setAttribute('style', countLink.getAttribute('style'));
            countLink.replaceWith(span);
            countLink.setAttribute('disabled', 'disabled');
            let url = countLink.href.replace(/(\?|$)/, '.json$1');
            try {
                const response = await fetch(url);
                console.log({response});
                const data = await response.json();
                console.log({data});
                if (!response.ok) {
                    console.log('throw error');
                    throw new Error(data.title || data.error);
                }
                const count = data['rows'][0]['count(*)'];
                const formattedCount = count.toLocaleString();
                span.closest('h3').textContent = formattedCount + ' rows';
            } catch (error) {
                console.log('Update', span, 'with error message', error);
                span.textContent = error.message;
                span.style.color = 'red';
            }
        });
    }
});
</script>
{% endif %}

{% endblock %}