<!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>Account Management</title>
    <style>
      body {
        max-width: 800px;
        margin: auto;
        padding: 1em;
      }
      .greeting ::selection {
        background-color: #000;
        color: #fff;
      }
      .greeting {
        background-color: var(--accent-color);
        color: #000;
        border-radius: 1.5em;
        padding: 1em;

        display: flex;
        flex-direction: row;
        gap: 1rem;
      }
      .greeting-l {
        flex: 0 0 auto;
        max-width: 100%;
        width: auto;
        height: 100%;
        max-height: 3rem;
        object-fit: contain;
        display: block;
      }
      .greeting-r {
        flex: 1 1 0px;
        min-width: 0;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .greeting-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      .greeting-top-left {
        font-size: 1.4rem;
      }
      .greeting-stats {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0.5ex;
      }
      .greeting-stats img {
        width: auto;
        height: 1em;
      }
      .greeting a {
        color: #000;
      }

      @media (max-width: 650px) {
        .greeting-top {
          flex-direction: column;
          gap: 0.2em;
          align-items: start;
        }
        .greeting-bottom {
          text-align: right;
        }
        .greeting-r {
          gap: 0.2em;
        }
      }

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

      .header {
        height: 96px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1em;
        margin: 1em;
      }
      .header > .greeting {
        flex: 1 1 0px;
        min-width: 0;
      }
      .header > .circle-button {
        flex: 0 0 auto;
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <a href="/"><img src="/favicon.png" width="64" height="auto" class="spinny favicon"></a><br>

    <div class="header">
      <div class="greeting">
        <img src="https://gdicon.oat.zone/icon.png?type=<%=type_str%>&value=<%=icon_value%>&color1=<%=color1%>&color2=<%=color2%><%=glow ? "&glow=1" : ""%>" width="150" height="150" class="greeting-l">
        <div class="greeting-r">
          <div class="greeting-top">
            <div class="greeting-top-left">
              hewwo, <b><%= username %></b>!
            </div>
            <div class="greeting-stats">
              <%= stars %> <img src="https://gdbrowser.com/assets/star.png"> <%= diamonds %> <img src="https://gdbrowser.com/assets/diamond.png"> <%= coins %> <img src="https://gdbrowser.com/assets/coin.png"> <%= user_coins %> <img src="https://gdbrowser.com/assets/silvercoin.png"> <%= demons %> <img src="https://gdbrowser.com/assets/demon.png">
            </div>
          </div>
          <div class="greeting-bottom">
            <a href="/accounts/settings">Settings</a> · <a>Log out</a>
          </div>
        </div>
      </div>
      <a href="/accounts/notifications/" title="Notifiations" class="circle-button notifications <%= unread_notifications ? "notifications-unread" : "" %>">
        <%= File.read("public/assets/icons/bell.svg") %>
      </a>
    </div>
    <br><br>
    blablabla lorem ipsum whatever. put stuff here later
  </body>
</html>
