<a href="/">
    <img src="/static/logo-caterva2-horizontal-small.png" alt="Caterva2 logo" id="logo">
</a>

<form hx-get="/htmx/path-list/"
      hx-target="#path-list"
      hx-trigger="change"
      hx-include="#query-search"
      hx-indicator="#path-list-wrapper .htmx-indicator"
      hx-on:htmx:before-request="clearContent('#path-list');">

    Roots:

    {% for root in roots %}
    {% with name=root.name %}
    <div class="form-check">
        <input class="form-check-input" type="checkbox"
               name="roots" value="{{ name }}" {{ "checked" if name in checked }}
               id="id_root_{{ name }}">
        <label class="form-check-label" for="id_root_{{ name }}">{{ name }}</label>
    </div>
    {% endwith %}
    {% endfor %}

    {% if user %}
    {% with name="@scratch" %}
    <div class="form-check">
        <input class="form-check-input" type="checkbox"
               name="roots" value="{{ name }}" {{ "checked" if name in checked }}
               id="id_root_{{ name }}">
        <label class="form-check-label" for="id_root_{{ name }}"
               title="This special root contains the results of calculations done by the user">
            {{ name }}
        </label>
    </div>
    {% endwith %}
    {% endif %}
</form>


{% if user %}
<div id="id_file_upload" title="Upload file to scratch">
    <label for="id_file" role="button" class="p-4 mt-3"
           ondrop="dropHandler(event)"
           ondragover="dragoverHandler(event)"
           ondragleave="dragleaveHandler(event)"
    >
        <i class="fa-solid fa-upload fa-2xl"></i>
        {% include 'loading.html' %}
    </label>
    <input type="file" name="file" id="id_file"
           hx-post="/htmx/upload/" hx-encoding="multipart/form-data"
           hx-indicator="#id_file_upload label"
    >
</div>
{% endif %}

<script>
function dropHandler(ev) {
    ev.preventDefault();
    const input = ev.target.closest('div').querySelector('input');
    input.files = ev.dataTransfer.files;
    input.dispatchEvent(new Event('change'));
}
function dragoverHandler(ev) {
    ev.preventDefault();
    ev.target.closest('div').classList.add('active');
}
function dragleaveHandler(ev) {
    ev.preventDefault();
    ev.target.closest('div').classList.remove('active');
}
</script>
