{% extends "_base.html" %}

{% block content %}
{% load static %}
{% load widget_tweaks %}
<form method="post">
    {% csrf_token %}
    <div class="flex flex-wrap mb-4">
        <div class="w-2/5 flex flex-wrap flex-col justify-center">
            <h2 class="heading font-normal">
                Neue Seite erstellen
            </h2>
        </div>
        <div class="w-3/5 flex justify-end">
            <input type="submit" name="submit_save" class="cursor-pointer bg-grey hover:bg-grey-dark text-white font-bold py-3 px-4 rounded mr-2" value="Speichern" />
            <input type="submit" name="submit_publish" class="cursor-pointer bg-blue hover:bg-blue-dark text-white font-bold py-3 px-4 rounded" value="Veröffentlichen" />
        </div>
    </div>

    <div class="flex flex-wrap">
        <div class="w-2/3 pr-2">
            {{form.errors}}
            <div class="w-full p-4 mb-4 rounded border border-solid border-grey-light shadow bg-white">
                {% render_field form.title placeholder="Titel hier eingeben" class="appearance-none block w-full bg-grey-lighter text-xl text-grey-darkest border border-grey-lighter rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey" %}
                <div class="mt-4">
                    {% render_field form.text placeholder="Text" class="bg-grey-lighter w-full p-2" %}
                </div>
            </div>
            <div class="w-full p-4 rounded border border-solid border-grey-light shadow bg-white">
                <h3 class="mb-2">Live Inhalte einbinden</h3>
                <input type="text" class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded mb-2 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey"
                    placeholder="Seite suchen" />
                <div class="relative my-2">
                    <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darkest py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-grey">
                        <option>Davor anhängen</option>
                        <option>Danach anhängen</option>
                    </select>
                    <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darkest">
                        <img src="{% static 'svg/select-down-arrow.svg' %}" class="fill-current h-4 w-4" />
                    </div>
                </div>
                <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
                    Seite anhängen
                </button>
            </div>
        </div>
        <div class="w-1/3 pl-2">
            <div class="w-full px-4 py-2 rounded border border-solid border-grey-light shadow bg-white">
                <div class="py-2 border-b solid border-grey-lighter mb-2">
                    <span class="block mb-2 font-bold">Sprache</span>
                    <label class="text-xs uppercase block">Aktuelle Sprache</label>
                    <div class="relative my-2">
                        {% render_field form.language id="parent" class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darkest py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-grey" %}
                        <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darkest">
                            <img src="{% static 'svg/select-down-arrow.svg' %}" class="fill-current h-4 w-4" />
                        </div>
                    </div>
                    <div class="entity-lang-list mt-4 mb-2">
                        <label class="text-xs uppercase block mb-2">Übersetzungen</label>
                        <!-- TODO: get available languages from site settings -->
                        <table style="width:100%;" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <a href="" class="text-black block p-2">
                                        Arabisch
                                    </a>
                                </td>
                                <td>
                                    <a href="" class="text-black block p-2 relative">
                                        <i data-feather="edit-2"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="" class="text-black block p-2">
                                        Englisch
                                    </a>
                                </td>
                                <td>
                                    <a href="" class="text-black block p-2 relative">
                                        <i data-feather="edit-2"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="" class="text-black block p-2">
                                        Farsi
                                    </a>
                                </td>
                                <td>
                                    <a href="" class="text-black block p-2 relative">
                                        <i data-feather="plus"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="" class="text-black block p-2">
                                        Französisch
                                    </a>
                                </td>
                                <td>
                                    <a href="" class="text-black block p-2 relative">
                                        <i data-feather="plus"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a href="" class="text-black block p-2">
                                        Türkisch
                                    </a>
                                </td>
                                <td>
                                    <a href="" class="text-black block p-2 relative">
                                        <i data-feather="plus"></i>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="py-2 border-b solid border-grey-lighter mb-2">
                    <span class="font-bold mb-2 block">Anordnung</span>
                    <label for="parent" class="text-xs uppercase">Übergeordnete Seite</label>
                    <div class="relative my-2">
                        {% render_field form.parent id="parent" class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darkest py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-grey" %}
                        <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darkest">
                            <img src="{% static 'svg/select-down-arrow.svg' %}" class="fill-current h-4 w-4" />
                        </div>
                    </div>
                    <label for="order" class="text-xs uppercase block mt-4">Reihenfolge</label>
                    <div class="relative my-2">
                        {% render_field form.order placeholder="0" id="order" class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded mb-2 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey" %}
                    </div>
                </div>
                <div class="py-2 border-b solid border-grey-lighter mb-2">
                    <label for="status" class="font-bold">Status</label>
                    <div class="relative my-2">
                        {% render_field form.status id="status" class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darkest py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-grey" %}
                        <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darkest">
                            <img src="{% static 'svg/select-down-arrow.svg' %}" class="fill-current h-4 w-4" />
                        </div>
                    </div>
                </div>
                <div class="pt-2 pb-4">
                    <span class="block font-bold mb-4">Icon</span>
                    {% render_field form.icon id="icon" class="image-field" %}
                    <label for="icon" class="font-bold my-2 bg-blue hover:bg-blue-dark focus:bg-blue-dark text-white font-bold py-2 pl-10 pr-4 rounded cursor-pointer relative">
                        <i data-feather="upload"></i>
                        <span class="standard_text">Icon festlegen</span>
                        <span class="filename"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}