{% extends "default.html" %}
{% block title %}Upload | gigadata{% endblock %}
{% block content %}
    <x-frame style="--width: 768px">
        <form method="POST" class="vbox" enctype="multipart/form-data">
            <h2>Upload</h2>
            <label>
                <span class="required-asterisk">Title</span>
                <input type="text" name="title" required>
            </label>
            <label>
                <span class="required-asterisk">Description</span>
                <textarea name="description" required></textarea>
            </label>
            <label>
                Origin URL
                <input type="url" name="origin_url">
                Can be left blank if not applicable.
            </label>
            <x-vbox>
                <span class="required-asterisk">Licences</span>
                <div class="multi-select" style="height: clamp(320px, 50vh, 640px)">
                    {% for licence in licences %}
                        <div class="licence-selection">
                            <label>
                                <input name="licence" type="checkbox" value="{{ licence.id }}">
                                {% if licence.pinned %}
                                    <iconify-icon icon="mdi:pin" title="Pinned">Pinned</iconify-icon>
                                {% endif %}
                                {% if not licence.free %}
                                    <iconify-icon icon="mdi:ban" title="Non-free">Non-free</iconify-icon>
                                {% endif %}
                                <span class="licence-title">
                                    <span class="licence-name">
                                        {{ licence.title }}
                                    </span>

                                    {% if licence.url %}
                                        <a href="{{ licence.url }}" target="_blank">More information</a>
                                    {% endif %}
                                </span>
                            </label>
                            <div class="licence-selection-info">
                                {% if licence.logo_url %}
                                    {% if licence.url %}
                                        <a href="{{ licence.url }}" target="_blank">
                                            <img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
                                        </a>
                                    {% else %}
                                        <img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
                                    {% endif %}
                                {% endif %}
                                <p>{{ licence.description | safe }}</p>
                            </div>
                        </div>
                   {% endfor %}
                </div>
                <p>
                    You can select multiple licences, but you must select at least one, and at least
                    one must be free. Selecting multiple licences means users are free to choose any
                    of them — they <em>do not</em> have to comply with all of them.
                </p>
                <div class="icon-explainer">
                    <iconify-icon icon="mdi:pin" title="Pinned"></iconify-icon>
                    Recommended for new works
                    <iconify-icon icon="mdi:ban" title="Non-free"></iconify-icon>
                    Not a free software, open source or free culture licence
                </div>
            </x-vbox>
            <label>
                <span class="required-asterisk">File</span>
                <input type="file" name="file" required>
            </label>
            <button type="submit">Upload</button>
        </form>
    </x-frame>
{% endblock %}