{% extends "base.html" %}

{% block title %}{{ database }}: {{ table }}{% endblock %}

{% block extra_head %}
{{- super() -}}
<style>
@media only screen and (max-width: 576px) {
{% for column in columns %}
    .rows-and-columns td:nth-of-type({{ loop.index }}):before { content: "{{ column|escape_css_string }}"; }
{% endfor %}
}
</style>
{% endblock %}

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

{% block crumbs %}
{{ crumbs.nav(request=request, database=database, table=table) }}
{% endblock %}

{% block content %}
<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_color }}">{{ table }}: {{ ', '.join(primary_key_values) }}{% if private %} 🔒{% endif %}</h1>

{% set links = row_actions %}{% if links %}
<div class="page-action-menu">
<details class="actions-menu-links details-menu">
    <summary>
        <div class="icon-text">
            <svg class="icon" aria-labelledby="actions-menu-links-title" role="img" style="color: #fff" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <title id="actions-menu-links-title">Row 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>
            <span>Row actions</span>
        </div>
    </summary>
    <div class="dropdown-menu">
        <div class="hook"></div>
        {% if links %}
        <ul>
            {% for link in links %}
            <li><a href="{{ link.href }}">{{ link.label }}
            {% if link.description %}
                <p class="dropdown-description">{{ link.description }}</p>
            {% endif %}</a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
</details>
</div>
{% endif %}

{{ top_row() }}

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

<p>This data as {% for name, url in renderers.items() %}<a href="{{ url }}">{{ name }}</a>{{ ", " if not loop.last }}{% endfor %}</p>

{% include custom_table_templates %}

{% if foreign_key_tables %}
    <h2>Links from other tables</h2>
    <ul>
        {% for other in foreign_key_tables %}
            <li>
                <a href="{{ other.link }}">
                    {{ "{:,}".format(other.count) }} row{% if other.count == 1 %}{% else %}s{% endif %}</a>
                from {{ other.other_column }} in {{ other.other_table }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

{% endblock %}