{% extends 'chat/base.html' %}
{% block title %}Home — DiscordClone{% endblock %}
{% block body %}
{% with profile=request.user.profile %}
<div class="app-layout">
  <!-- Channel Sidebar -->
  <div class="sidebar-channels">
    <div class="sidebar-header" style="color:#fff;">
      <i class="bi bi-discord text-primary"></i> DiscordClone
    </div>
    <div style="flex:1;overflow-y:auto;">
      <div class="sidebar-section">
        Channels
        {% if profile.is_moderator %}
        <a href="{% url 'create_channel' %}" class="text-white" style="font-size:1.1rem;" title="New Channel" id="btn_create_channel"><i class="bi bi-plus-lg"></i></a>
        {% endif %}
      </div>
      {% for ch in channels %}
      {% if ch.channel_type == 'voice' %}
      <div class="channel-wrapper" id="ch_wrapper_{{ ch.id }}">
        <div class="channel-item voice-channel" id="ch_{{ ch.id }}" data-channel-id="{{ ch.id }}" data-channel-name="{{ ch.name }}" style="cursor:pointer; display:flex; align-items:center;">
          <i class="bi bi-volume-up-fill me-1"></i>
          <span>{{ ch.name }}</span>
          {% if profile.is_admin %}
          <a href="{% url 'delete_channel' ch.id %}" class="ms-auto text-danger" style="font-size:.75rem;" onclick="return confirm('Delete #{{ ch.name }}?')" id="del_ch_{{ ch.id }}"><i class="bi bi-trash"></i></a>
          {% endif %}
        </div>
        <div class="voice-members-list" id="voice_members_{{ ch.id }}">
          {% for mem in ch.voice_members.all %}
          <div class="voice-member-item" data-user-id="{{ mem.user.id }}">
            {% if mem.avatar %}
            <img src="{{ mem.avatar.url }}" alt="av">
            {% else %}
            <div class="voice-member-avatar-fallback">{{ mem.user.username|first|upper }}</div>
            {% endif %}
            <span>{{ mem.user.username }}</span>
          </div>
          {% endfor %}
        </div>
      </div>
      {% else %}
      <a href="{% url 'channel' ch.id %}" class="channel-item" id="ch_{{ ch.id }}">
        <i class="bi bi-hash"></i>
        <span>{{ ch.name }}</span>
        {% if profile.is_admin %}
        <a href="{% url 'delete_channel' ch.id %}" class="ms-auto text-danger" style="font-size:.75rem;" onclick="return confirm('Delete #{{ ch.name }}?')" id="del_ch_{{ ch.id }}"><i class="bi bi-trash"></i></a>
        {% endif %}
      </a>
      {% endif %}
      {% empty %}
      <div class="px-3 py-2" style="color:#8a8c92;font-size:.8rem;">No channels yet.</div>
      {% endfor %}

      <div class="sidebar-section">Direct Messages</div>
      {% for u in users %}
      <a href="{% url 'dm' u.username %}" class="channel-item" id="dm_{{ u.id }}">
        <span {% if u.profile.online %}class="online-dot"{% else %}class="offline-dot"{% endif %}></span>
        {{ u.username }}
        <span class="role-badge role-{{ u.profile.role }} ms-auto">{{ u.profile.role|slice:":3" }}</span>
      </a>
      {% endfor %}
    </div>

    <!-- User bar -->
    <div class="user-bar">
      <div class="user-avatar">
        {% if profile.avatar %}
        <img src="{{ profile.avatar.url }}" alt="av">
        {% else %}
        {{ request.user.username|first|upper }}
        {% endif %}
      </div>
      <div style="flex:1;min-width:0;">
        <div style="font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ request.user.username }}</div>
        <div><span class="role-badge role-{{ profile.role }}">{{ profile.role }}</span></div>
      </div>
      <a href="{% url 'profile' %}" class="text-secondary" title="Edit Profile" id="btn_profile"><i class="bi bi-gear"></i></a>
      {% if profile.is_admin %}
      <a href="{% url 'admin_panel' %}" class="text-warning ms-1" title="Admin Panel" id="btn_admin"><i class="bi bi-shield-check"></i></a>
      {% endif %}
      <a href="{% url 'logout' %}" class="text-secondary ms-1" title="Logout" id="btn_logout"><i class="bi bi-box-arrow-right"></i></a>
    </div>
  </div>

  <!-- Main: welcome -->
  <div class="main-content" style="align-items:center;justify-content:center;background:var(--dc-bg);">
    <div style="text-align:center;color:var(--dc-muted);">
      <div style="font-size:4rem;">👾</div>
      <h2 style="color:#fff;">Welcome, {{ request.user.username }}!</h2>
      <p>Pick a channel or DM from the sidebar.</p>
      {% if messages %}
      {% for msg in messages %}
      <div class="alert alert-{{ msg.tags }} mt-2">{{ msg }}</div>
      {% endfor %}
      {% endif %}
    </div>
  </div>
</div>
{% endwith %}
{% endblock %}