{% extends "default.html" %}
{% block title %}Edit picture {{ resource.title }} | gigadata{% endblock %}
{% block content %}
    <x-frame style="--width: 768px">
        <h1>Editing: {{ resource.title }}</h1>
        <p>{{ resource.description }}</p>
        <p>
            <a href="/picture/{{ resource.id }}/">Back</a>
        </p>
        <form class="vbox" method="POST">
            <label>
                <span class="required-asterisk">Title</span>
                <input type="text" name="title" value="{{ resource.title }}" required>
            </label>
            <label>
                Description
                <textarea name="description">{{ resource.description }}</textarea>
            </label>
            <span class="required-asterisk">Picture type</span>
            <div class="single-select" style="height: clamp(320px, 25vh, 640px)">
                {% for type in types %}
                    <div class="image-type-selection">
                        <label>
                            <input name="nature" type="radio" value="{{ type.id }}" {% if type == resource.nature %}checked{% endif %} required>
                            <span class="image-type-title">
                                <span class="image-type-name">
                                    {{ type.id }}
                                </span>
                            </span>
                        </label>
                        <div class="image-type-selection-info">
                            <p>{{ type.description | safe }}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <label>
                Origin URL
                <input type="url" name="origin_url" value="{{ resource.origin_url }}">
                Can be left blank if not applicable.
            </label>
            <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 PictureLicence.query.filter_by(resource_id=resource.id, licence_id=licence.id).first() %}checked{% endif %}>
                            {% 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.id }}]
                                    {{ 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.info_url %}
                                    <a href="{{ licence.info_url }}" target="_blank" tabindex="-1">     {# An equivalent link already exists, only one is focusable #}
                                        <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>
            <button type="submit">Save</button>
        </form>
    </x-frame>
{% endblock %}