<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{{ url_for('static', filename='style/normalize.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/skeleton.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='style/index.css') }}" />
    <title>{{ name }}</title>
  </head>
  <body>
    <div class="container">
      <nav class="section section-nav">
        <div>
          <h4 class="title line-clamp" wrap="2">{{ name }}</h4>

          <!-- path of folder -->
          {% if parent is not none %}
            <div class="subtitle line-clamp">~{{ parent.general_path(False, True) }}</div>
          {% elif not is_root %}
            <div class="subtitle line-clamp">~/</div>
          {% endif %}
        </div>

        <!-- zip current -->
        <a class="button" href="{{ zip }}">Zip</a>
      </nav>

      <div class="grid">
        <!-- list -->
      <div class="section section-list grid-item-list">
        <ul class="item-list">

          <!-- back button -->
          {% if parent %}
            <li>
              <a class="button item-primary" href="{{ parent.general_path() }}">...</a>
            </li>
          {% elif not is_root %}
            <li>
              <a class="button item-primary" href="\">...</a>
            </li>
          {% endif %}

          <!-- folders and files -->
          {% for route in routes %}
            <li>
              {% if route.is_file %}
                <a class="button item-primary" href="{{ route.general_path() }}">{{ route.name }}</a>
              {% else %}
                <a class="button item-primary mr-1" href="{{ route.general_path() }}">{{ route.name }}</a>
                <a class="button" href="{{ route.zip_path() }}">ZIP</a>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </div>

      <!-- qrcode -->
      <div class="section section-qr grid-item-qr">
        {{ svg | safe }}
        <a href="http://{{ local_link }}" class="tiny bold">{{ local_link }}</a>
      </div>
      </div>
    </div>

    <footer>
      <div class="container">
        <div class="m-auto">
          <a href="https://github.com/mHaisham/qrshare">
            <img class="footer-logo" src="{{ url_for('static', filename='assets/github.svg') }}">
          </a>
        </div>
      </div>
    </footer>
  </body>
</html>
