{% load i18n madga_studio_tags %}
<aside class="madga-sidebar">
  <div class="madga-brand">
    <span class="madga-brand-mark">{% studio_icon "post" size=14 stroke=2.4 %}</span>
    <span class="madga-brand-name">Ma<span class="accent">DG</span>A</span>
  </div>

  <div class="madga-workspace" data-madga-ws-toggle role="button" tabindex="0" aria-haspopup="true" aria-expanded="false">
    <div class="madga-workspace-avatar">{{ site.name|first|default:"M"|upper }}</div>
    <div class="madga-workspace-name">{{ site.name|default:"MADGA" }}</div>
    {% studio_icon "chevron-down" size=14 css_class="text-[var(--fg-2)]" %}
  </div>

  {# Workspace switcher dropdown — populated by the studio_topbar context processor with user_sites. #}
  <div class="madga-ws-menu" data-madga-ws-menu hidden>
    {% if user_sites %}
      {% for s in user_sites %}
        <form method="post" action="{% url 'madga_studio:workspace_switch' %}" style="margin:0;">
          {% csrf_token %}
          <input type="hidden" name="site_id" value="{{ s.id }}">
          <input type="hidden" name="next" value="{{ request.path }}">
          <button type="submit" class="madga-ws-menu-item {% if s.id == site.id %}is-active{% endif %}">
            <span class="madga-workspace-avatar" style="width:22px; height:22px; font-size:11px;">{{ s.name|first|upper }}</span>
            <span style="flex:1; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ s.name }}</span>
            {% if s.id == site.id %}{% studio_icon "check" size=12 stroke=2.5 %}{% endif %}
          </button>
        </form>
      {% endfor %}
    {% endif %}
    <a href="{% url 'madga_studio:workspace_create' %}" class="madga-ws-menu-item madga-ws-menu-create">
      {% studio_icon "plus" size=12 stroke=2.5 %}
      <span>{% trans "New workspace" %}</span>
    </a>
  </div>

  <style>
    .madga-workspace { cursor: pointer; }
    .madga-workspace[aria-expanded="true"] { background: var(--bg-2); }
    .madga-ws-menu {
      margin: 4px 12px 10px;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .madga-ws-menu[hidden] { display: none; }
    .madga-ws-menu-item {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 8px 10px;
      background: transparent; border: 0; cursor: pointer;
      color: var(--fg-1); font-size: 13px; font-family: inherit;
      text-decoration: none;
    }
    .madga-ws-menu-item:hover { background: var(--bg-2); color: var(--fg-0); }
    .madga-ws-menu-item.is-active { color: var(--accent); font-weight: 500; }
    .madga-ws-menu-create { border-top: 1px solid var(--border); color: var(--fg-2); }
  </style>
  <script>
  (function () {
    var toggle = document.querySelector('[data-madga-ws-toggle]');
    var menu = document.querySelector('[data-madga-ws-menu]');
    if (!toggle || !menu) return;
    function close() { menu.hidden = true; toggle.setAttribute('aria-expanded', 'false'); }
    function open() { menu.hidden = false; toggle.setAttribute('aria-expanded', 'true'); }
    toggle.addEventListener('click', function () { menu.hidden ? open() : close(); });
    toggle.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); menu.hidden ? open() : close(); } });
    document.addEventListener('click', function (e) {
      if (!menu.contains(e.target) && !toggle.contains(e.target)) close();
    });
  })();
  </script>

  <a href="{% url 'madga_studio:post_create' %}" class="madga-new-post-btn">
    {% studio_icon "plus" size=14 stroke=2.5 %} {% trans "New post" %}
  </a>

  <nav class="madga-nav">
    <a href="{% url 'madga_studio:dashboard' %}" class="madga-nav-item {% studio_active request 'dashboard' %}">
      {% studio_icon "dashboard" %} {% trans "Dashboard" %}
    </a>
    <a href="{% url 'madga_studio:post_list' %}" class="madga-nav-item {% studio_active request 'post_list' 'post_create' 'post_edit' %}">
      {% studio_icon "post" %} {% trans "Posts" %}
      {% if posts_count is not None %}<span class="madga-nav-count">{{ posts_count }}</span>{% endif %}
    </a>
    <a href="{% url 'madga_studio:page_list' %}" class="madga-nav-item {% studio_active request 'page_list' 'page_create' 'page_edit' %}">
      {% studio_icon "page" %} {% trans "Pages" %}
    </a>
    <a href="{% url 'madga_studio:media_list' %}" class="madga-nav-item {% studio_active request 'media_list' %}">
      {% studio_icon "media" %} {% trans "Media library" %}
    </a>
    <a href="{% url 'madga_studio:taxonomy_list' %}" class="madga-nav-item {% studio_active request 'taxonomy_list' %}">
      {% studio_icon "tag" %} {% trans "Categories & tags" %}
    </a>

    <div class="madga-nav-section">{% trans "Site" %}</div>
    <a href="{% url 'madga_studio:theme' %}" class="madga-nav-item {% studio_active request 'theme' %}">
      {% studio_icon "theme" %} {% trans "Theme" %}
    </a>
    <a href="{% url 'madga_studio:theme_gallery' %}" class="madga-nav-item {% studio_active request 'theme_gallery' %}">
      {% studio_icon "image" %} {% trans "Theme gallery" %}
    </a>
    <a href="{% url 'madga_studio:layouts' %}" class="madga-nav-item {% studio_active request 'layouts' %}">
      {% studio_icon "layouts" %} {% trans "Layouts" %}
    </a>
    <a href="{% url 'madga_studio:navigation' %}" class="madga-nav-item {% studio_active request 'navigation' %}">
      {% studio_icon "navigation" %} {% trans "Navigation" %}
    </a>
    <a href="{% url 'madga_studio:homepage_builder' %}" class="madga-nav-item {% studio_active request 'homepage_builder' %}">
      {% studio_icon "homepage" %} {% trans "Homepage" %}
    </a>

    <div class="madga-nav-section">{% trans "Broadcast" %}</div>
    <a href="{% url 'madga_studio:channel_list' %}" class="madga-nav-item {% studio_active request 'channel_list' 'channel_connect' %}">
      {% studio_icon "broadcast" %} {% trans "Channels" %}
    </a>
    <a href="{% url 'madga_studio:broadcast_list' %}" class="madga-nav-item {% studio_active request 'broadcast_list' %}">
      {% studio_icon "send" %} {% trans "Broadcasts" %}
    </a>
    <a href="{% url 'madga_studio:subscriber_list' %}" class="madga-nav-item {% studio_active request 'subscriber_list' %}">
      {% studio_icon "users" %} {% trans "Subscribers" %}
    </a>

    <div class="madga-nav-section">{% trans "Workspace" %}</div>
    <a href="{% url 'madga_studio:user_list' %}" class="madga-nav-item {% studio_active request 'user_list' %}">
      {% studio_icon "users" %} {% trans "Users" %}
    </a>
    <a href="{% url 'madga_studio:settings' %}" class="madga-nav-item {% studio_active request 'settings' %}">
      {% studio_icon "settings" %} {% trans "Settings" %}
    </a>
    <a href="{% url 'madga_studio:api_keys' %}" class="madga-nav-item {% studio_active request 'api_keys' %}">
      {% studio_icon "external" %} {% trans "API keys" %}
    </a>
  </nav>

  <div style="flex:1"></div>

  <div style="display:flex; flex-direction:column; gap:8px;">
    {% if site %}
    <a href="/" target="_blank" rel="noopener" class="madga-nav-item">
      {% studio_icon "globe" %}
      <span>{% trans "View site" %}</span>
      <span style="margin-left:auto; opacity:.55;">{% studio_icon "external" size=11 stroke=2 %}</span>
    </a>
    {% endif %}

    <div class="madga-user-card">
      <div class="madga-user-avatar">{{ request.user.username|first|upper }}</div>
      <div style="flex:1; min-width:0;">
        <div class="madga-user-name">{{ request.user.get_full_name|default:request.user.username }}</div>
        <div class="madga-user-role">
          {% if membership %}{{ membership.get_role_display }}{% elif request.user.is_superuser %}{% trans "Superuser" %}{% endif %}
          · <a href="{% url 'madga_studio:logout' %}" style="color:inherit;">{% trans "Sign out" %}</a>
        </div>
      </div>
    </div>
  </div>
</aside>