{% extends "_base.html" %}

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

{% block nav_items %}
<nav class="flex items-center space-x-6">
    <a href="/runs" class="text-gray-300 hover:text-white {% if active_tab == 'runs' %}text-white font-medium{% endif %}">Runs{% if nav_counts and nav_counts.runs %} ({{ nav_counts.runs }}){% endif %}</a>
    <a href="/recipes" class="text-gray-300 hover:text-white {% if active_tab == 'recipes' %}text-white font-medium{% endif %}">Recipes{% if nav_counts and nav_counts.recipes %} ({{ nav_counts.recipes }}){% endif %}</a>
    <a href="/effects" class="text-gray-300 hover:text-white {% if active_tab == 'effects' %}text-white font-medium{% endif %}">Effects{% if nav_counts and nav_counts.effects %} ({{ nav_counts.effects }}){% endif %}</a>
    <a href="/media" class="text-gray-300 hover:text-white {% if active_tab == 'media' %}text-white font-medium{% endif %}">Media{% if nav_counts and nav_counts.media %} ({{ nav_counts.media }}){% endif %}</a>
    <a href="/storage" class="text-gray-300 hover:text-white {% if active_tab == 'storage' %}text-white font-medium{% endif %}">Storage{% if nav_counts and nav_counts.storage %} ({{ nav_counts.storage }}){% endif %}</a>
    <a href="/download/client" class="text-gray-300 hover:text-white" title="Download CLI client">Client</a>
    {% if request and request.state.nav_tree_html %}
    <span class="text-gray-600">|</span>
    <div class="flex items-center space-x-3 [&_a]:text-gray-400 [&_a:hover]:text-white [&_a]:text-sm [&_a]:no-underline [&_img]:w-5 [&_img]:h-5">
        {{ request.state.nav_tree_html | safe }}
    </div>
    {% else %}
    <span class="text-gray-600">|</span>
    <a href="https://blog.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Blog</a>
    <a href="https://market.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Market</a>
    <a href="https://account.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Account</a>
    {% endif %}
</nav>
{% endblock %}

{% block nav_right %}
<div class="flex items-center space-x-4">
    {% if request and request.state.cart_mini_html %}
    <div class="[&_a]:text-gray-300 [&_a:hover]:text-white">
        {{ request.state.cart_mini_html | safe }}
    </div>
    {% endif %}
    {% if request and request.state.auth_menu_html %}
    <div class="[&_a]:text-gray-300 [&_a:hover]:text-white [&_a]:text-sm [&_a]:no-underline">
        {{ request.state.auth_menu_html | safe }}
    </div>
    {% elif user %}
    <span class="text-gray-400">{{ user.username }}</span>
    <a href="/auth/logout" class="text-gray-300 hover:text-white">Logout</a>
    {% else %}
    <a href="/auth/login" class="text-gray-300 hover:text-white">Login</a>
    {% endif %}
</div>
{% endblock %}