<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>⇆🎉 {{ title }}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.8">
    <link rel="stylesheet" type="text/css" media="screen" href="/.cpr/browser.css{{ ts }}">
    <link rel="stylesheet" type="text/css" media="screen" href="/.cpr/upload.css{{ ts }}">
</head>

<body>
    <div id="ops">
        <a href="#" data-dest="">---</a>
        <a href="#" data-perm="read" data-dest="search">🔎</a>
        {%- if have_up2k_idx %}
        <a href="#" data-dest="up2k">🚀</a>
        {%- else %}
        <a href="#" data-perm="write" data-dest="up2k">🚀</a>
        {%- endif %}
        <a href="#" data-perm="write" data-dest="bup">🎈</a>
        <a href="#" data-perm="write" data-dest="mkdir">📂</a>
        <a href="#" data-perm="write" data-dest="new_md">📝</a>
        <a href="#" data-perm="write" data-dest="msg">📟</a>
    </div>

    <div id="op_search" class="opview">
        {%- if have_tags_idx %}
        <table id="srch_form" class="tags"></table>
        {%- else %}
        <table id="srch_form"></table>
        {%- endif %}
        <div id="srch_q"></div>
    </div>
    {%- include 'upload.html' %}
    
    <h1 id="path">
        <a href="#" id="entree">🌲</a>
        {%- for n in vpnodes %}
        <a href="/{{ n[0] }}">{{ n[1] }}</a>
        {%- endfor %}
    </h1>
    
    <div id="pro" class="logue">{{ logues[0] }}</div>

    <table id="treetab">
        <tr>
            <td id="tree">
                <a href="#" id="detree">🍞...</a>
                <ul id="treeul"></ul>
            </td>
            <td id="treefiles"></td>
        </tr>
    </table>

    <table id="files">
        <thead>
            <tr>
                <th></th>
                <th><span>File Name</span></th>
                <th sort="int"><span>Size</span></th>
                {%- for k in taglist %}
                    {%- if k.startswith('.') %}
                        <th sort="int"><span>{{ k[1:] }}</span></th>
                    {%- else %}
                        <th><span>{{ k[0]|upper }}{{ k[1:] }}</span></th>
                    {%- endif %}
                {%- endfor %}
                <th><span>T</span></th>
                <th><span>Date</span></th>
            </tr>
        </thead>
        <tbody>

{%- for f in files %}
    <tr><td>{{ f.lead }}</td><td><a href="{{ f.href }}">{{ f.name|e }}</a></td><td>{{ f.sz }}</td>
    {%- if f.tags is defined %}
        {%- for k in taglist %}
            <td>{{ f.tags[k] }}</td>
        {%- endfor %}
    {%- endif %}
    <td>{{ f.ext }}</td><td>{{ f.dt }}</td></tr>
{%- endfor %}

        </tbody>
    </table>
    
    <div id="epi" class="logue">{{ logues[1] }}</div>

    <h2><a href="?h">control-panel</a></h2>

    {%- if srv_info %}
    <div id="srv_info"><span>{{ srv_info }}</span></div>
    {%- endif %}

    <div id="widget">
        <div id="wtoggle">♫</div>
        <div id="widgeti">
            <div id="pctl"><a href="#" id="bprev">⏮</a><a href="#" id="bplay">▶</a><a href="#" id="bnext">⏭</a></div>
            <canvas id="pvol" width="288" height="38"></canvas>
            <canvas id="barpos"></canvas>
            <canvas id="barbuf"></canvas>
        </div>
    </div>

    <script>
        var tag_order_cfg = {{ tag_order }};
    </script>
    <script src="/.cpr/util.js{{ ts }}"></script>
    <script src="/.cpr/browser.js{{ ts }}"></script>
    <script src="/.cpr/up2k.js{{ ts }}"></script>
    <script>
        apply_perms({{ perms }});
    </script>
</body>

</html>
