{% extends 'components/shell.html' %}

{% from 'components/image_link.html' import image_link %}

{% from 'components/timestamp.html' import timestamp %}
{% from 'components/links.html' import kemono_link %}

{% set role_links = {
  "consumer": "/account",
  "moderator": "/account/moderator",
  "administrator": "/account/administrator"
} %}

{% block title %}
  <title>{{ props.title }}</title>
{% endblock title %}

{% block content %}
<section class="site-section site-section--account">
  <div class="account-view">
    <div class="account-view__header">
      {# Finishing icons later... #}
      {# <div class="account-view__icon">
        {{ image_link(
          src='/static/user-placeholder.jpg',
          class_name=''
        ) }}
      </div> #}
      <span class="account-view__greeting">
        Hello,
        <span class="account-view__identity">
          {{ props.account.username }}
        </span>
      </span>

      <div class="account-view__info">
        Joined {{ props.account.created_at|relative_date }} |
        <span class="account-view__role">
          {{ kemono_link(
            url=role_links[props.account.role],
            text=props.account.role,
            is_noop=false
          ) }}
        </span>
      </div>
    </div>
    <p class="def-list__section">
      Notifications:
      <span>
        {{ kemono_link(
          url="/account/notifications",
          text=props.notifications_count,
          is_noop=false
        ) }}
      </span>
    </p>
    <p class="def-list__section">
      {{ kemono_link(
        url="/account/keys",
        text="Keys",
        is_noop=false
      ) }}
    </p>
    <p class="def-list__section">
      {{ kemono_link(
        url="/account/review_dms",
        text="Review DMs",
        is_noop=false
      ) }}
    </p>
    <p class="def-list__section">
      {{ kemono_link(
        url=url_for("account.change_password"),
        text="Change password",
        is_noop=false
      ) }}
    </p>
  </div>
</section>
{% endblock content %}
