{% extends "_base.html" %}

{% block brand %}
<a href="https://blog.rose-ash.com/" class="no-underline text-stone-900">Rose Ash</a>
<span class="text-stone-400 mx-1">|</span>
<a href="/" class="no-underline text-stone-900">Art-DAG</a>
{% endblock %}

{% block cart_mini %}
{% if request and request.state.cart_mini_html %}
  {{ request.state.cart_mini_html | safe }}
{% endif %}
{% endblock %}

{% block nav_tree %}
{% if request and request.state.nav_tree_html %}
  {{ request.state.nav_tree_html | safe }}
{% endif %}
{% endblock %}

{% block auth_menu %}
{% if request and request.state.auth_menu_html %}
  {{ request.state.auth_menu_html | safe }}
{% endif %}
{% endblock %}

{% block auth_menu_mobile %}
{% if request and request.state.auth_menu_html %}
  {{ request.state.auth_menu_html | safe }}
{% endif %}
{% endblock %}

{% block sub_nav %}
<div class="bg-stone-200 border-b border-stone-300">
  <div class="max-w-screen-2xl mx-auto px-4">
    <nav class="flex items-center gap-4 py-2 text-sm overflow-x-auto no-scrollbar">
      <a href="/runs" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'runs' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Runs{% if nav_counts and nav_counts.runs %} ({{ nav_counts.runs }}){% endif %}</a>
      <a href="/recipes" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'recipes' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Recipes{% if nav_counts and nav_counts.recipes %} ({{ nav_counts.recipes }}){% endif %}</a>
      <a href="/effects" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'effects' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Effects{% if nav_counts and nav_counts.effects %} ({{ nav_counts.effects }}){% endif %}</a>
      <a href="/media" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'media' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Media{% if nav_counts and nav_counts.media %} ({{ nav_counts.media }}){% endif %}</a>
      <a href="/storage" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'storage' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Storage{% if nav_counts and nav_counts.storage %} ({{ nav_counts.storage }}){% endif %}</a>
      <a href="/download/client" class="whitespace-nowrap px-3 py-1.5 rounded text-stone-700 hover:bg-stone-300" title="Download CLI client">Client</a>
    </nav>
  </div>
</div>
{% endblock %}
