<html>
    <head>
      <title>{{ title }} - Archivy</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
      {% if config.THEME_CONF.get('use_custom_css', False) %}
        <link rel="stylesheet" href="/static/custom.css">
      {% endif %}

	  <link rel="icon" href="{{ url_for('static', filename='archivy.svg')}}" type="image/svg+xml">
      <style>

      </style>
    </head>
    <body>

        {% set path = [] %}
        {% set i = namespace(value=0) %}
        {% macro draw_dir(dir, depth) -%}
            {% set i.value = i.value + 1 %}
            {% if depth %}
                {% do path.append(dir.name) %}
            {% endif %}
            <div id="cont-{{i.value}}" class="folder-cont">
                <div class="folder-title d-flex">
                    <button class="expand-btn" onclick="createInteractive(this, {{i.value}});">
                        <svg class="octicon closed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>
                        <svg class="octicon open" style="display: none;" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>
                    </button>
					<a href="/?path={{ SEP.join(path) + SEP }}"><h3>
                        {{ dir.name }}
						</h3></a>
                </div>
                {% if dir.child_files | length %}
                {% endif %}

                <ul class="items-{{i.value}}">
                    {% for dataobj in dir.child_files | sort(attribute="title") %}
                        <li class="d-flex">
                            <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.427 4.427l3.396 3.396a.25.25 0 010 .354l-3.396 3.396A.25.25 0 016 11.396V4.604a.25.25 0 01.427-.177z"></path></svg>
                            <a href="/dataobj/{{ dataobj["id"] }}">
                                {{ dataobj["title"] }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
                {% for child_dir in dir.child_dirs.values() | sort(attribute="name") %}
                    {{ draw_dir(child_dir, depth + 1) }}
                {% endfor %}
            </div>
            {% if depth %}
                {% do path.pop() %}
            {% endif %}
        {%- endmacro %}

        <div class="Header">
            <div class="Header-item full">
                <a class="Header-link" href="/">
                    <img src="https://archivy.github.io/img/logo-2.png" alt="archivy logo" width="35" height="35">
                    <h3>Archivy</h3>
                </a>
            </div>

            {% if current_user.is_authenticated and not view_only %}
                <a href="/plugins" class="Header-link Header-item">
                    <h3>Plugins</h3>
                </a>
                <a class="Header-link Header-item" href="/bookmarklet">
                    <h3>Bookmarklet</h3>
                </a>
                <a href="/user/edit" class="Header-item">
                    <svg class="octicon" color="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="30" height="30"><path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path></svg>
                </a>
            {% endif %}
        </div>
        <div id="page">
            {% if current_user.is_authenticated %}
                <div class="sidebar">
                    {{ draw_dir(dataobjs, 0) }}
                </div>
            {% endif %}

            <main class="content pt-3">
                {% with messages = get_flashed_messages(with_categories=True) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="flash mt-3 mb-3 flash-{{ category }}">{{ message }}</div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

			{% if current_path is defined %}
    			<div class="d-flex" id="dir-info">
					<!-- shows current path on navigation or on dataobjs -->
					<div id="current-path">

						<a href="/?path=">root</a></li>
						{% set split_path = current_path.strip(SEP).split(SEP) %}
						{% if split_path[0] != '' %}
							{% for i in range(split_path | length) %}
								<span> → </span>
								<a href="/?path={{SEP.join(split_path[0:i + 1])}}{{SEP}}">{{split_path[i]}}</a></li>
							{% endfor %}
						{% endif %}
					</div>
					{% if dir is defined %}
						<!-- show child file / dir counts on nav -->
						<p>{{dir.child_files | length}} file{{dir.child_files | length | pluralize()}}</p>
						<p>{{dir.child_dirs | length}} child director{{dir.child_dirs | length | pluralize("y", "ies")}}</p>
					{% endif %}
    			</div>
			{% endif %}
			{% block content %}{% endblock %}
			</main>
		</div>

        <script>
          const SCRIPT_ROOT = {{ request.script_root|tojson|safe }} + "/api";
          let max_folder_id = document.querySelectorAll(".folder-cont").length;
          function createInteractive(btn, id)
          {
            // expand
            let parentDiv = btn.parentNode;
            let childNotes = document.querySelector(".items-" + id);
            // check if expanded
            let expanded = window.getComputedStyle(childNotes).getPropertyValue("display") === "block";
            let icons = btn.querySelectorAll("svg");
            if (!expanded) {
              childNotes.style.display = "block";
              icons[1].style.display = "block";
              icons[0].style.display = "none";
            }
            // collapse
            else {
              childNotes.style.display = "none";
              icons[0].style.display = "block";
              icons[1].style.display = "none";
            }

          }
        </script>
    </body>
</html>
