{% extends "scitex_sdk/app/app_shell.html" %}
{% load i18n static scitex_static %}
{% comment %}
Host chrome comes from scitex_sdk/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 %}
    {# Shared full-pane width contract (scitex-sdk>=0.3.8): app_shell.html is #}
    {# only a block shim, so the leaf links the utility stylesheet itself. #}
    {# Shared tab contracts (scitex-sdk>=0.3.9, underline-only selected). #}
    <link rel="stylesheet" href="{% static 'scitex_sdk/ui/css/utils/layout.css' %}">
    <link rel="stylesheet" href="{% static 'scitex_sdk/ui/css/app/content-tabs.css' %}">
    <link rel="stylesheet" href="{% app_static 'scitex_storage/index.css' %}">
{% endblock %}
{% block scitex_app_content %}
<div id="stx-storage-app" class="stx-storage stx-layout-fill" data-app-name="scitex_storage">
    {% include "scitex_storage/_app_header.html" %}

    <nav class="stx-content-tabs" role="tablist" aria-label="{% translate 'Storage sections' %}">
        {% for t in tabs %}
            <a role="tab" href="?tab={{ t.key }}" class="stx-content-tabs__tab"
               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 %}