{% set metaTitle = "Dashboard" %}
{% set metaUrl = '/dashboard' %}

{% extends "_layout.njk" %}

{% block stylesheets %}
<!-- Libs stylesheets -->
<link rel="stylesheet" href="libs/fontello/fontello.css{{ versions[1] }}">
<link rel="stylesheet" href="libs/bulma-collapsible/bulma-collapsible.min.css{{ versions[3] }}">
{{ super() }}
<link rel="stylesheet" href="css/sweetalert.css{{ versions[1] }}">
<link rel="stylesheet" href="css/thumbs.css{{ versions[1] }}">
<link rel="stylesheet" href="css/dashboard.css{{ versions[1] }}">
{% endblock %}

{% block scripts %}
{{ super() }}
<!-- Libs scripts -->
<script src="libs/sweetalert/sweetalert.min.js{{ versions[3] }}"></script>
<script src="libs/axios/axios.min.js{{ versions[3] }}"></script>
<script src="libs/clipboard.js/clipboard.min.js{{ versions[3] }}"></script>
<script src="libs/lazyload/lazyload.min.js{{ versions[3] }}"></script>
{# Polyfill smooth scroll for older browsers #}
<script src="libs/smoothscroll/smoothscroll.min.js{{ versions[3] }}"></script>
<script src="libs/bulma-collapsible/bulma-collapsible.min.js{{ versions[3] }}"></script>
<!-- Scripts -->
{# We assign an ID for this so that the script can find out its own version #}
<script id="mainScript" src="js/dashboard.js{{ versions[1] }}"></script>
<script src="js/misc/utils.js{{ versions[1] }}"></script>
{% endblock %}

{% block endmeta %}
{% include "_partial/noscript-refresh.njk" %}
{% endblock %}

{% block content %}
{{ super() }}
<section id="dashboard" class="section is-hidden">
  <div id="panel" class="container">
    <h1 class="title">
      Dashboard
    </h1>
    <p class="subtitle">
      A simple <strong>dashboard</strong>, to sort your uploaded stuff
    </p>
    <hr>

    <div class="columns">
      <div class="column is-one-quarter">
        <aside id="menu" class="menu">
          <p class="menu-label">General</p>
          <ul class="menu-list is-unselectable">
            <li>
              <a href="." class="is-relative">Frontpage</a>
            </li>
            <li>
              <a id="itemUploads" class="is-relative">Uploads</a>
            </li>
            <li>
              <a id="itemDeleteUploadsByNames" class="is-relative">Delete uploads by names</a>
            </li>
          </ul>
          <p class="menu-label">Albums</p>
          <ul class="menu-list is-unselectable">
            <li>
              <a id="itemManageYourAlbums" class="is-relative">Manage your albums</a>
            </li>
            <li>
              <a id="albumsSidebarCollapse" href="#albumsSidebar" data-action="collapse" data-text-collapse="Collapse albums sidebar" data-text-expand="Expand albums sidebar" disabled>Fetching albums sidebar…</a>
            </li>
            <li>
              <ul id="albumsSidebar" class="is-collapsible"></ul>
            </li>
          </ul>
          <p id="itemLabelAdmin" class="menu-label is-hidden">Administration</p>
          <ul id="itemListAdmin" class="menu-list is-unselectable is-hidden">
            <li>
              <a id="itemStatistics" class="is-relative is-hidden">Statistics</a>
            </li>
            <li>
              <a id="itemManageUploads" class="is-relative is-hidden">Manage uploads</a>
            </li>
            <li>
              <a id="itemManageAlbums" class="is-relative is-hidden">Manage albums</a>
            </li>
            <li>
              <a id="itemManageUsers" class="is-relative is-hidden">Manage users</a>
            </li>
          </ul>
          <p class="menu-label">Configuration</p>
          <ul class="menu-list is-unselectable">
            <li>
              <a id="ShareX" class="is-relative">ShareX user profile</a>
            </li>
            <li>
              <a id="itemManageToken" class="is-relative">Manage your token</a>
            </li>
            <li>
              <a id="itemChangePassword" class="is-relative">Change your password</a>
            </li>
            <li>
              <a id="itemLogout" class="is-relative">Logout</a>
            </li>
          </ul>
        </aside>
      </div>
      <div id="page" class="column has-text-centered is-third-quarters">
        <img alt="logo" src="images/logo.png{{ versions[2] }}">
      </div>
    </div>
  </div>
</section>

{% include "_partial/loader.njk" %}
{% include "_partial/noscript.njk" %}
{% endblock %}