{% extends "scitex_app/app_shell.html" %}
{% load i18n scitex_static %}
{% comment %}
Host chrome comes from scitex_app/app_shell.html: the hub maps it to its own
base page (site header + dock), standalone falls back to scitex-ui's shell.
{% endcomment %}
{% block extra_css %}
    <link rel="stylesheet" href="{% app_static 'scitex_storage/index.css' %}">
{% endblock %}
{% block scitex_app_content %}
<div id="stx-storage-app" class="stx-storage" data-app-name="scitex_storage">
    <header class="stx-storage-head">
        <h1 class="stx-storage-title"><i class="fas fa-database" aria-hidden="true"></i> {% translate "Storage" %}</h1>
        <p class="stx-storage-lede">{% translate "How full your storage is, what duplicates it, and what to move." %}</p>
    </header>

    <nav class="stx-storage-tabs" role="tablist" aria-label="{% translate 'Storage sections' %}">
        {% for t in tabs %}
            <a role="tab" href="?tab={{ t.key }}" class="stx-storage-tab{% if t.active %} is-active{% endif %}"
               aria-selected="{% if t.active %}true{% else %}false{% endif %}">
                {{ t.label }}{% if t.soon %} <span class="stx-storage-soon">{% translate "Soon" %}</span>{% endif %}
            </a>
        {% endfor %}
    </nav>

    {# Only the Backup placeholder renders through this template; Usage, Move #}
    {# and Duplicates are served by organize.html via organize.serve. #}
    <section class="stx-storage-card stx-storage-coming">
        <i class="fas fa-person-digging" aria-hidden="true"></i>
        <h2>{% translate "Coming soon" %}</h2>
        <p>
            {% if tab == "backup" %}{% translate "Scheduled, verified backups of your data to a second machine." %}
            {% else %}{% translate "Find duplicate files across your volumes and free the space." %}{% endif %}
        </p>
    </section>
</div>
{% endblock %}
{% block extra_js %}{% endblock %}