{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/vendor/codemirror/codemirror.min.css">
<link rel="stylesheet" href="/static/vendor/codemirror/theme/monokai.min.css">
<link rel="stylesheet" href="/static/css/project_files.css">
{% endblock %}
{% block content %}
<div class="pf-page" id="project-files" data-slug="{{ project['slug'] or project['uid'] }}" data-owner="{{ 1 if is_owner and not read_only else 0 }}">
    <div class="pf-header">
        <a href="/projects/{{ project['slug'] or project['uid'] }}" class="back-link">&larr; {{ project['title'] }}</a>
        <div class="pf-toolbar">
            {% if is_owner and not read_only %}
            <button type="button" class="btn btn-secondary" id="pf-new-file">New file</button>
            <button type="button" class="btn btn-secondary" id="pf-new-folder">New folder</button>
            <button type="button" class="btn btn-secondary" id="pf-upload">Upload</button>
            <button type="button" class="btn btn-secondary" id="pf-rename">Rename</button>
            <button type="button" class="btn btn-secondary" id="pf-delete">Delete</button>
            <button type="button" class="btn btn-primary" id="pf-save">Save</button>
            {% endif %}
            <button type="button" class="btn btn-secondary" data-zip-download="/projects/{{ project['slug'] or project['uid'] }}/files/zip">Download as zip</button>
            <span class="pf-status" id="pf-status"></span>
        </div>
    </div>

    {% if read_only %}
    <div class="pf-readonly-banner">This project is read-only. Its files are immutable until the owner turns read-only off.</div>
    {% endif %}

    <div class="pf-body">
        <aside class="pf-tree" id="pf-tree"></aside>
        <section class="pf-main">
            <div class="pf-current" id="pf-current"></div>
            <div class="pf-editor-wrap" id="pf-editor-wrap" hidden>
                <textarea id="project-file-editor" class="hidden-textarea"></textarea>
            </div>
            <div class="pf-preview" id="pf-preview" hidden></div>
            <div class="pf-empty" id="pf-empty">
                <div class="pf-empty-inner">
                    <span class="pf-empty-icon">&#x1F4C2;</span>
                    <span class="pf-empty-msg">Select a file to view or edit.</span>
                </div>
            </div>
        </section>
    </div>

    <dp-upload id="pf-upload-widget" mode="direct" multiple field-name="file"
        endpoint="/projects/{{ project['slug'] or project['uid'] }}/files/upload" hidden></dp-upload>
    <script type="application/json" id="pf-data">{{ files | tojson }}</script>
</div>
{% endblock %}

{% block extra_js %}
<script defer src="/static/vendor/codemirror/codemirror.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/python/python.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/javascript/javascript.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/clike/clike.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/htmlmixed/htmlmixed.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/xml/xml.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/css/css.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/go/go.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/sql/sql.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/shell/shell.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/yaml/yaml.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/markdown/markdown.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/swift/swift.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/php/php.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/ruby/ruby.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/haskell/haskell.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/lua/lua.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/perl/perl.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/r/r.min.js"></script>
<script defer src="/static/vendor/codemirror/mode/dart/dart.min.js"></script>
<script type="module">
import { ProjectFiles } from "/static/js/ProjectFiles.js";
const root = document.getElementById("project-files");
if (root) {
    const files = new ProjectFiles(root);
    files.init();
    window.app.projectFiles = files;
}
</script>
{% endblock %}