{% extends "base.html" %}

{% block content %}
<!-- Mobile tabs (below md breakpoint) -->
<div class="md:hidden mb-4">
    <div class="flex overflow-x-auto gap-1 pb-2 scrollbar-hide">
        {% if is_admin %}
        <a href="/settings/data-source"
           class="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition whitespace-nowrap
                  {% if '/data-source' in request.path %}bg-koin-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
            Data Source
        </a>
        <a href="/settings/export"
           class="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition whitespace-nowrap
                  {% if '/export' in request.path %}bg-koin-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
            Export
        </a>
        <a href="/settings/system"
           class="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition whitespace-nowrap
                  {% if '/system' in request.path %}bg-koin-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
            System
        </a>
        {% endif %}
        <a href="/settings/capital"
           class="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition whitespace-nowrap
                  {% if '/capital' in request.path %}bg-koin-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
            Capital
        </a>
        <a href="/settings/fees"
           class="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition whitespace-nowrap
                  {% if '/fees' in request.path %}bg-koin-600 text-white{% else %}bg-gray-800 text-gray-400 hover:text-white{% endif %}">
            Fees
        </a>
    </div>
</div>

<!-- Desktop: sidebar + content -->
<div class="flex gap-6">
    <!-- Sidebar (desktop only) -->
    <aside class="w-56 shrink-0 hidden md:block">
        <nav class="sticky top-20 space-y-1">
            <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-3">Settings</h2>

            {% if is_admin %}
            <!-- Admin-only settings -->
            <a href="/settings/data-source"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition
                      {% if '/data-source' in request.path %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800/50{% endif %}">
                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
                </svg>
                Data Source
            </a>

            <a href="/settings/export"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition
                      {% if '/export' in request.path %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800/50{% endif %}">
                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Export
            </a>

            <a href="/settings/system"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition
                      {% if '/system' in request.path %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800/50{% endif %}">
                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
                </svg>
                System
            </a>

            <div class="border-t border-gray-800 my-2"></div>
            {% endif %}

            <!-- User settings (visible to both admin and user) -->
            <a href="/settings/capital"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition
                      {% if '/capital' in request.path %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800/50{% endif %}">
                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                Capital
            </a>

            <a href="/settings/fees"
               class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition
                      {% if '/fees' in request.path %}bg-gray-800 text-white{% else %}text-gray-400 hover:text-white hover:bg-gray-800/50{% endif %}">
                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
                Fees
            </a>
        </nav>
    </aside>

    <!-- Content area -->
    <main class="flex-1 min-w-0">
        {% block settings_content %}{% endblock %}
    </main>
</div>
{% endblock %}

{% block scripts %}
{% block settings_scripts %}{% endblock %}
{% endblock %}