<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <title><%= name %> by <%= username %></title>

    <style>
      body {
        max-width: 800px;
        margin: auto;
        padding: 1em;
      }

      .card {
        background-color: var(--background-color-2);

        border-radius: 1.5em;
        padding: 1em;

        display: flex;
        flex-direction: row;
        gap: 1rem;

        margin-bottom: 1em;
      }
      .card.bright {
        background-color: var(--accent-color);
        color: #000;
      }
      .card.bright ::selection {
        background-color: #000;
        color: #fff;
      }
      .card.bright a {
        color: #000;
      }
      .card-l {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
      }
      .level-img {
        display: block;
        height: 3rem;
      }
      .stars {
        font-size: 1.1em;
        font-weight: bold;
      }
      .stars img {
        width: auto;
        height: 1em;
        vertical-align: middle;
      }
      .card-r {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
      }
      .card-top {
        display: flex;
      }
      .label-left {
        flex: 1 1 auto;
        font-size: 1.5em;
        font-weight: bold;
      }
      .label-right {
        flex: 0 0 auto;
      }
      .label-right img {
        height: 1em;
        width: auto;
        vertical-align: middle;
      }
      .card-header {
        font-weight: bold;
        color: var(--text-color-dark);
        text-transform: uppercase;
        font-size: 0.8em;
        user-select: none;
      }

      .favicon {
        margin: auto;
        display: block;
      }

      .description {
        flex-direction: column;
        gap: 0.5em;
      }

      .leaderboard {
        min-width: 100%;
        overflow: auto;
        font-size: 0.9em;
        border-collapse: separate;
        border-spacing: 0;
      }
      /* honestly quite horrendous */
      .leaderboard tr:nth-child(2) td:first-child {
        border-top-left-radius: 0.5em;
      }
      .leaderboard tr:nth-child(2) td:last-child {
        border-top-right-radius: 0.5em;
      }
      .leaderboard tr:last-child td:first-child {
        border-bottom-left-radius: 0.5em;
      }
      .leaderboard tr:last-child td:last-child {
        border-bottom-right-radius: 0.5em;
      }
      .leaderboard tr:not(.leaderboard-header):nth-child(even) td {
        background-color: var(--background-color-2);
      }
      .leaderboard th, .leaderboard td {
        padding: 0.2em 0.5em;
        text-align: left;
      }
      .leaderboard th {
        font-size: 0.8em;
        user-select: none;
        color: var(--text-color-dark);
        text-transform: uppercase;
      }
      .leaderboard td.rank {
        width: 30px;
        font-weight: bold;
      }
      .leaderboard td.percent {
        width: 75px;
      }
      .leaderboard td.coins {
        width: 4em;
      }
      .leaderboard td.coins .coin-container {
        display: flex;
        flex-direction: row;
      }
      .leaderboard td.coins .coin-container img {
        width: 1em;
        height: auto;
      }
      .leaderboard td.icon {
        width: 2.5em;
        text-align: center;
      }
      .leaderboard td.name {
        width: 180px
      }
      .leaderboard td.name a {
        text-decoration: none;
      }
      .leaderboard .player-icon {
        height: 1.2em;
        width: auto;
        vertical-align: middle;
      }

      .comment {
        flex-direction: column;
      }
      .comment-author {
        display: flex;
        flex-direction: row;
        gap: 1ex;
        align-items: center;
      }
      .comment-author .player-icon {
        height: 1.5em;
        width: auto;
      }
      .comment-date {
        color: var(--text-color-dark);
      }
      .comment-author-label {
        font-weight: bold;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="/"><img src="/favicon.png" width="64" height="auto" class="spinny favicon"></a><br>

    <div class="card bright">
      <div class="card-l">
        <%=
          difficulty = (difficulty_set || difficulty_community).try { |n| LevelDifficulty.new(n) }
          demon_difficulty = demon_difficulty_int.try { |n| DemonDifficulty.new(n) }
          "<img src='#{Templates.get_difficulty_icon(difficulty, featured, epic, demon_difficulty)}' class='level-img'>"
        %>
        <%- if stars -%>
          <div class="stars">
            <%= stars %> <img src="/assets/icons/gd/star.png">
          </div>
        <%- end -%>
      </div>
      <div class="card-r">
        <div class="card-top">
          <div class="label-left">
            <%= name %>
          </div>
          <div class="label-right">
            <%= downloads %> <img src="/assets/icons/gd/download.png"> <%= likes %> <img src="/assets/icons/gd/like.png">
          </div>
        </div>
        <div class="card-bottom">
          by <a href="/user/<%= username %>"><%= username %></a>
        </div>
      </div>
    </div>

    <div class="card description">
      <div class="card-header">DESCRIPTION</div>
      <div>
        <%= description != "" ? HTML.escape(description) : "<i>No description provided</i>" %>
      </div>
    </div>

    <div class="card description">
      <div class="card-header">SONG</div>
      <div>
        <%- if song_name -%>
          <div><a href="<%= song_url %>" target="_blank" rel="noopener"><%= song_name %></a></div>
          <%- if song_author && song_author != "" -%>
            <div>by <a href="<%= song_author_url %>" target="_blank" rel="noopener"><%= song_author %></a></div>
          <%- else -%>
            <div><i>unknown artist</i></div>
          <%- end -%>
        <%- else -%>
          idk
        <%- end -%>
      </div>
    </div>

    <table class="leaderboard">
      <tr class="leaderboard-header">
        <th class="rank">RANK</td>
        <th class="percent">PERCENT</td>
        <th class="coins">COINS</td>
        <th class="icon"></td>
        <th class="name">PLAYER</td>
        <th class="date">TIME</td>
      </tr>

      <% 
        rank = 0
        scores.each do |percent, coins, username, icon_type, color1, color2, cube, ship, ball, ufo, wave, robot, spider, special, set_at| 
          rank = rank + 1 

          icon_value = [cube, ship, ball, ufo, wave, robot, spider][icon_type]
          type_str = ["cube", "ship", "ball", "ufo", "wave", "robot", "spider"][icon_type]

          set_at_date = Time.parse(set_at, Format::TIME_FORMAT, Time::Location::UTC)
      %>
        <tr>
          <td class="rank">#<%= rank %></td>
          <td class="percent"><%= percent %>%</td>
          <td class="coins">
            <div class="coin-container">
              <%- coins.times do |i| -%>
                <img src="/assets/icons/gd/<%= rated_coins ? "silvercoin" : "browncoin" %>.png">
              <%- end -%>
            </div>
          </td>
          <td class="icon">
            <img src="https://gdicon.oat.zone/icon.png?type=<%=type_str%>&value=<%=icon_value%>&color1=<%=color1%>&color2=<%=color2%><%=special ? "&glow=1" : ""%>" class="player-icon">
          </td>
          <td class="name">
            <a href="/user/<%= username %>"><%= username %></a>
          </td>
          <td class="date">
            <time datetime="<%= Time::Format::RFC_3339.format(set_at_date) %>" title="<%= Time::Format::RFC_2822.format(set_at_date) %>"><%= Format.fmt_timespan(Time.utc - set_at_date) %></time>
          </td>
        </tr>
      <%- end -%>
      <%- if scores.size == 0 -%>
        <tr>
          <td colspan="6" style="text-align: center">
            <i>No scores</i>
          </td>
        </tr>
      <%- end -%>
    </table>

    <h3>Comments</h3>

    <%- comments.each do |comment, created_at, username, icon_type, color1, color2, cube, ship, ball, ufo, wave, robot, spider, special|
      icon_value = [cube, ship, ball, ufo, wave, robot, spider][icon_type]
      type_str = ["cube", "ship", "ball", "ufo", "wave", "robot", "spider"][icon_type]

      created_at_date = Time.parse(created_at, Format::TIME_FORMAT, Time::Location::UTC)
      %>
      <div class="card comment">
        <div class="comment-author">
          <img src="https://gdicon.oat.zone/icon.png?type=<%=type_str%>&value=<%=icon_value%>&color1=<%=color1%>&color2=<%=color2%><%=special ? "&glow=1" : ""%>" class="player-icon">
          <a class="comment-author-label" href="/user/<%= username %>"><%= username %></a>
          <time class="comment-date" datetime="<%= Time::Format::RFC_3339.format(created_at_date) %>" title="<%= Time::Format::RFC_2822.format(created_at_date) %>"><%= Format.fmt_timespan(Time.utc - created_at_date) %> ago</time>
        </div>
        <div>
          <%= HTML.escape(comment) %>
        </div>
      </div>
    <%- end -%>

  </body>
</html>
