{% extends "./page_detail.html" %}
{% load static aircox_admin i18n %}

{% block assets %}
{{ block.super }}
<script src="{% static "aircox/js/dashboard.js" %}"></script>
{% endblock %}

{% block init-scripts %}
aircox.labels = {% inline_labels %}
{{ block.super }}
{% endblock %}

{% block header-cover %}
<div class="flex-column">
    <img src="{{ cover }}" ref="cover" class="cover">
    <button type="button" class="button" @click="$refs['cover-select'].open()">
        {% translate "Change cover" %}
    </button>
</div>
{% endblock %}

{% block content-container %}
<a-select-file ref="cover-select"
    :labels="window.aircox.labels"
    list-url="{% url "api:image-list" %}"
    upload-url="{% url "api:image-list" %}"
    delete-url="{% url "api:image-detail" pk=123 %}"
    title="{% translate "Select an image" %}"            list-class="grid-4"
    @select="(event) => fileSelected('cover-select', 'cover-input', $refs.cover)"
    >
    <template #upload-preview="{upload}">
        <img :src="upload.fileURL" class="upload-preview blink"/>
    </template>
    <template #default="{item, load, lastUrl}">
        <div class="flex-column is-fullheight" v-if="item">
            <figure class="flex-grow-1">
                <img :src="item.file"/>
            </figure>
            <div>
                <label class="label small">[[ item.name || item.original_filename ]]</label>
                <a-action-button
                    class="has-text-danger small float-right"
                    icon="fa fa-trash"
                    confirm="{% translate "Are you sure you want to remove this item from server?" %}"
                    method="DELETE"
                    :url="'{% url "api:image-detail" pk="123" %}'.replace('123', item.id)"
                    @done="load(lastUrl)">
                </a-action-button>
            </div>
        </div>
    </template>
</a-select-file>

<section class="container">
<form method="post" enctype="multipart/form-data">
    {% block page_form %}
    {% csrf_token %}
    {% for field in form %}
    {% if field.name == "cover" %}
    <input type="hidden" name="{{ field.name }}" value="{{ field.value }}" ref="cover-input"/>
    {% else %}
    <div class="field {% if field.name != "content" %}is-horizontal{% endif %}">
        <label class="label">{{ field.label }}</label>
        <div class="control clear-unset">
            {% if field.name == "pub_date" %}
            <input type="datetime-local" class="input" name="{{ field.name }}"
                value="{{ field.value|date:"Y-m-d" }}T{{ field.value|date:"H:i" }}"/>
            {% elif field.name == "content" %}
            <textarea name="{{ field.name }}" class="is-fullwidth height-25">{{ field.value|striptags|safe }}</textarea>
            {% else %}
            {% include "./dashboard/form_field.html" with field=field.field name=field.name value=field.initial %}
            {% endif %}
        </div>
        <p class="help">{{ field.help_text }}</p>
    </div>
    {% endif %}
    {% if field.errors %}
    <p class="help is-danger">{{ field.errors }}</p>
    {% endif %}
    {% if field.help_text %}
    <p class="help">{{ field.help_text|safe }}</p>
    {% endif %}
    {% endfor %}
    {% endblock %}

    <hr/>
    <div class="has-text-right">
        <button type="submit" class="button">{% translate "Update" %}</button>
    </div>
</form>
</section>
{% endblock %}
