<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><%= title %></title>
    <link rel="stylesheet" href="/lumi-tokens.css?v=<%= assetVersion %>" />
    <link rel="stylesheet" href="/styles.css?v=<%= assetVersion %>" />
    <link rel="stylesheet" href="/lumi-layout.css?v=<%= assetVersion %>" />
    <link rel="stylesheet" href="/lumi-components.css?v=<%= assetVersion %>" />
    <%- include("../../../src/web/views/partials/theme-vars", { theme }) %>
  </head>
  <body data-theme-id="<%= theme ? theme.id : '' %>">
    <main class="standalone-page">
      <div class="card standalone-card">
        <h1>Access restricted</h1>
        <p class="hint">Your account is currently restricted by moderation.</p>
        <div class="stat-grid">
          <div class="stat">
            <span class="stat-label">Action</span>
            <span class="stat-value"><%= sanction.action_type %></span>
          </div>
          <div class="stat">
            <span class="stat-label">Status</span>
            <span class="stat-value"><%= sanction.status %></span>
          </div>
          <div class="stat">
            <span class="stat-label">When</span>
            <span class="stat-value"><%= new Date(sanction.created_at).toLocaleString() %></span>
          </div>
          <div class="stat">
            <span class="stat-label">Expires</span>
            <span class="stat-value"><%= sanction.expires_at ? new Date(sanction.expires_at).toLocaleString() : 'Permanent' %></span>
          </div>
        </div>
        <div class="card standalone-detail">
          <h2>Summary</h2>
          <p><%= sanction.reason_short %></p>
          <h2>Details</h2>
          <p><%= sanction.reason_detail %></p>
          <p class="hint">Moderator: <%= sanction.created_by_name || 'Staff' %></p>
        </div>
      </div>
    </main>
  </body>
</html>
