<%- include("partials/layout-top", { title }) %>
<section class="hero">
  <h1>Welcome to <%= siteTitle %></h1>
  <p>Manage the bot, explore stats, and extend features from the WebUI.</p>
  <div class="hero-actions">
    <a class="button" href="/commands">View commands</a>
    <a class="button subtle" href="/leaderboards">Leaderboards</a>
  </div>
</section>
<% if (homepageHero) { %>
<section class="homepage-dynamic-hero card" aria-label="Featured community content">
  <div>
    <span class="eyebrow"><%= homepageHero.type.replaceAll("_", " ") %></span>
    <h2><%= homepageHero.title %></h2>
    <% if (homepageHero.description) { %><p><%= homepageHero.description %></p><% } %>
    <% if (homepageHero.source_url) { %><a class="button subtle" href="<%= homepageHero.source_url %>" target="_blank" rel="noopener noreferrer">Open featured content</a><% } %>
  </div>
  <% if (homepageHero.image_url) { %>
  <img class="homepage-hero-media" src="<%= homepageHero.image_url %>" alt="" loading="lazy" />
  <% } else if (homepageHero.discord_widget) { %>
  <div class="homepage-hero-media homepage-discord-card">
    <div class="homepage-discord-card-header">
      <span class="homepage-discord-icon" aria-hidden="true"><%= homepageHero.discord_widget.name.slice(0, 1).toUpperCase() %></span>
      <span>
        <strong><%= homepageHero.discord_widget.name %></strong>
        <small><%= homepageHero.discord_widget.presence_count %> online now</small>
      </span>
    </div>
    <% if ((homepageHero.discord_widget.channels || []).length) { %>
    <div>
      <span class="homepage-discord-label">Visible channels</span>
      <div class="homepage-discord-pills">
        <% homepageHero.discord_widget.channels.forEach((channel) => { %><span># <%= channel %></span><% }) %>
      </div>
    </div>
    <% } %>
    <% if ((homepageHero.discord_widget.members || []).length) { %>
    <div>
      <span class="homepage-discord-label">Visible members</span>
      <div class="homepage-discord-members">
        <% homepageHero.discord_widget.members.forEach((member) => { %>
        <span>
          <% if (member.avatar_url) { %><img src="<%= member.avatar_url %>" alt="" loading="lazy" /><% } %>
          <strong><%= member.username %></strong>
          <% if (member.status) { %><small><%= member.status %></small><% } %>
        </span>
        <% }) %>
      </div>
    </div>
    <% } %>
    <% if (homepageHero.discord_widget.invite_url) { %>
    <a class="button" href="<%= homepageHero.discord_widget.invite_url %>" target="_blank" rel="noopener noreferrer">Join Discord</a>
    <% } %>
  </div>
  <% } else if (homepageHero.embed_url) { %>
  <% const heroFrameStyle = `${homepageHero.aspect_ratio ? `aspect-ratio:${homepageHero.aspect_ratio};` : ""}${homepageHero.embed_height ? `min-height:${homepageHero.embed_height}px;` : ""}`; %>
  <div class="homepage-hero-embed-grid<%= homepageHero.secondary_embed_url ? " has-secondary" : "" %>">
    <iframe class="homepage-hero-media" src="<%= homepageHero.embed_url %>" title="<%= homepageHero.title %>" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" allow="<%= homepageHero.iframe_allow || "accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" %>" <%- homepageHero.iframe_sandbox ? `sandbox="${homepageHero.iframe_sandbox}"` : "" %> <%- heroFrameStyle ? `style="${heroFrameStyle}"` : "" %> allowfullscreen></iframe>
    <% if (homepageHero.secondary_embed_url) { %>
    <iframe class="homepage-hero-media homepage-hero-chat" src="<%= homepageHero.secondary_embed_url %>" title="<%= homepageHero.title %> chat" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
    <% } %>
  </div>
  <% } else if (homepageHero.fallback_image_url || homepageHero.fallback_text || homepageHero.fallback_url) { %>
  <div class="homepage-hero-media homepage-hero-error" role="status">
    <% if (homepageHero.fallback_image_url) { %><img src="<%= homepageHero.fallback_image_url %>" alt="" loading="lazy" /><% } %>
    <strong>Featured content unavailable</strong>
    <span><%= homepageHero.fallback_text || homepageHero.render_error || "Open the fallback link instead." %></span>
    <% if (homepageHero.fallback_url) { %><a class="button subtle" href="<%= homepageHero.fallback_url %>" target="_blank" rel="noopener noreferrer">Open fallback</a><% } %>
  </div>
  <% } else if (homepageHero.render_error) { %>
  <div class="homepage-hero-media homepage-hero-error" role="status">
    <strong>Featured content unavailable</strong>
    <span><%= homepageHero.render_error %></span>
  </div>
  <% } %>
</section>
<% } %>
<% if ((homepageLinks || []).length) { %>
<section class="homepage-link-strip" aria-label="Community links">
  <% homepageLinks.forEach((link) => { %>
  <a class="homepage-link-button" href="<%= link.url %>" target="_blank" rel="noopener noreferrer">
    <% if (link.icon_url) { %>
    <img src="<%= link.icon_url %>" alt="" loading="lazy" />
    <% } else { %>
    <span aria-hidden="true"><%= link.fallback_icon %></span>
    <% } %>
    <span><strong><%= link.label %></strong><small><%= link.description %></small></span>
  </a>
  <% }) %>
</section>
<% } %>
<section class="grid">
  <div class="card">
    <h2>Bot control</h2>
    <p>Configure settings, update the bot, and manage plugins from the dashboard.</p>
    <a href="/admin" class="link">Open admin dashboard</a>
  </div>
  <div class="card">
    <h2>Community stats</h2>
    <p>Track activity, view leaderboards, and browse profile stats.</p>
    <a href="/leaderboards" class="link">View leaderboards</a>
  </div>
  <div class="card">
    <h2>Custom modules</h2>
    <p>Create commands and pages directly in the WebUI.</p>
    <a href="/admin/commands" class="link">Manage commands</a>
  </div>
</section>
<%- include("partials/layout-bottom") %>
