{% extends "hq/base.html" %}
{% load static i18n hq %}

{% block title %}{{ title|default:_("Console") }}{% endblock %}
{% block heading %}{{ title|default:_("Console") }}{% endblock %}

{% block module_css %}<link rel="stylesheet" href="{% static 'hq/css/panels.css' %}">{% endblock %}

{% block actions %}
    {% comment %}
        A format switch rather than a disclosure: the same facts are either laid out as panels or
        printed as the JSON an API reader would get, never both at once. The two are siblings so
        the button can simply swap which is on.
    {% endcomment %}
    <div class="hq-actions">
        <a class="hq-link hq-raw-open" href="{{ json_url }}" target="_blank" rel="noopener">
            {% translate "Open endpoint" %}{% hq_icon "external-link" %}
        </a>
        <button type="button"
                class="btn-secondary hq-raw-toggle"
                data-url="{{ json_url }}"
                data-label-show="{% translate 'Show JSON' %}"
                data-label-hide="{% translate 'Show panels' %}"
                aria-expanded="false"
                aria-controls="hq-json">
            {% hq_icon "braces" %}
            <span class="hq-raw-label">{% translate "Show JSON" %}</span>
        </button>
    </div>
{% endblock %}

{% block content %}
    <div id="hq-cards" class="hq-panel">
        {% comment %}
            The strip is the console's; modules fill it in the order they are listed. The
            environment leads because it is context for everything below it -- you want to know
            you are looking at production before you read anything else.
        {% endcomment %}
        {% if environment or tiles %}
            <div class="tiles hq-tiles">
                {% if environment %}
                    <div class="tile hq-tile-env env-{{ environment_slug }}">
                        <div class="label">{% translate "Environment" %}</div>
                        <div class="value">{{ environment }}</div>
                    </div>
                {% endif %}
                {% for tile in tiles %}
                    <div class="tile {{ tile.modifier }}">
                        <div class="label">{{ tile.label }}</div>
                        <div class="value{% if tile.small %} hq-value-sm{% endif %}{% if tile.mono %} mono{% endif %}">
                            {% if tile.value and tile.url %}
                                <a class="hq-link" href="{{ tile.url }}" target="_blank" rel="noopener">
                                    {{ tile.value }}{% hq_icon "external-link" %}
                                </a>
                            {% else %}
                                {{ tile.value|default:"—" }}
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
        {% comment %}
            Each panel is already rendered, with its own context and nothing else. The slot
            carries only the width, so two consecutive half-width panels sit side by side and the
            packing stays CSS's problem rather than this template's.
        {% endcomment %}
        <div class="hq-panels">
            {% for panel in panels %}
                <div class="hq-slot hq-slot-{{ panel.width }}" data-module="{{ panel.slug }}">{{ panel.html }}</div>
            {% empty %}
                <div class="card">
                    <p class="note">
                        {% hq_icon "info" %}
                        <span>{% translate "No console modules are configured." %}</span>
                    </p>
                </div>
            {% endfor %}
        </div>
    </div>
    {% comment %}
        The same facts, in the shape a script would get them. Fetched rather than rendered inline
        so what you read is genuinely the endpoint's answer — if the JSON ever disagreed with the
        panels, this is where it would show.
    {% endcomment %}
    <pre id="hq-json" class="hq-json hq-panel" data-loading="{% translate 'Loading…' %}" hidden></pre>
{% endblock %}

{% block scripts %}<script src="{% static 'hq/js/console.js' %}" defer></script>{% endblock %}