{% extends "index.twig" %}

{% block title %}Edit Menu{% endblock %}

{% block content %}
 <div class="uk-container uk-margin">
    {{ block("messages_queue", "message_queue.twig") }}
    {% if items %}
    <form class="uk-form-stacked" action="{{ route() }}index.php/menu{{ form.post_key|default('') }}" method="post">
        <div class="uk-button-group uk-width-1-1 uk-margin">
            <input type="submit" class="uk-button uk-button-primary uk-width-1-2" value="Save"/>
            <a href="{{ route() }}index.php/menus" type="button" class="uk-button uk-button-danger uk-width-1-2">Close</a>
        </div>
        <div class="uk-child-width-1-2 uk-margin" uk-grid>
            <div>
                <label class="uk-form-label">Name (title)</label>
                <div class="uk-form-controls">
                    <input name="title" class="uk-input uk-width-1-1" type="text" placeholder="Add the menu title here..." value="{{ form.title|default('') }}">
                </div>
            </div>
            <div>
                <label class="uk-form-label">The computed path of the menu item based on the alias field.</label>
                <div class="uk-form-controls">
                    <input name="path" class="uk-input uk-width-1-1" type="text" readonly value="{{ form.path|default('') }}">
                </div>
            </div>
        </div>
        <div class="uk-margin">
            <label class="uk-form-label">Alias</label>
            <div class="uk-form-controls">
                <input name="alias" class="uk-input uk-width-1-1" type="text" placeholder="The alias computed from the title if not set" value="{{ form.alias|default('') }}">
            </div>
        </div>
        <ul class="uk-flex-center"  uk-switcher="connect: .switcher-container; animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium" uk-tab>
            <li class="uk-active"><a href="#">Details</a></li>
            <li><a href="#">Publish</a></li>
        </ul>
        <ul class="uk-switcher switcher-container uk-margin">
            <li>
                <div class="uk-child-width-1-2 uk-margin" uk-grid>
                    <div>
                        <label class="uk-form-label">Item</label>
                        <div class="uk-form-controls">
                            <select name="item_id" class="uk-select">
                                {% for item in items %}
                                    <option value="{{ item.id }}" {% if item.id == form.id|default(0) %}selected{% endif %}>{{ item.title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="uk-form-label">Is this your home page menu item?</label>
                        <div class="uk-form-controls">
                            <select name="home" class="uk-select">
                                <option value="1">Yes</option>
                                <option value="0" {% if form.home == 0 %}selected{% endif %}>No</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="uk-form-label">Position of this menu item?</label>
                        <div class="uk-form-controls">
                            <select name="position" class="uk-select">
                                <option value="center" {% if form.params.position == 'center' %}selected{% endif %}>Center</option>
                                <option value="right" {% if form.params.position == 'right' %}selected{% endif %}>Right</option>
                            </select>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="uk-child-width-1-2 uk-margin" uk-grid>
                    <div>
                        <label class="uk-form-label">Published Up</label>
                        <div class="uk-form-controls">
                            <input name="publish_up" class="uk-input uk-width-1-1" type="datetime-local"
                                   value="{{ form.publish_up|default(form.today_date|default('')) }}"/>
                        </div>
                    </div>
                    <div>
                        <label class="uk-form-label">Published Down</label>
                        <div class="uk-form-controls">
                            <input name="publish_down" class="uk-input uk-width-1-1" type="datetime-local"
                                   value="{{ form.publish_down|default('') }}"/>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="uk-form-label">Status</label>
                    <div class="uk-form-controls">
                        <select name="published" class="uk-select">
                            <option value="1">Published</option>
                            <option value="2" {% if form.published == 2 %}selected{% endif %}>Archived</option>
                            <option value="-1" {% if form.published == -1 %}selected{% endif %}>Trashed</option>
                            <option value="" {% if form.published == 0 %}selected{% endif %}>Unpublished</option>
                        </select>
                    </div>
                </div>
            </li>
        </ul>
        <input type="hidden" name="menu_id" value="{{ form.id|default(0) }}">
        <input type="hidden" name="{{ token() }}" value="1">
    </form>
    {% else %}
        <a class="uk-button uk-button-default" href="{{ route() }}index.php/item?task=create">Create</a>
        <div class="uk-alert-primary" uk-alert>
            <p>There has no items been found, click create to add items.</p>
        </div>
    {% endif %}
</div>
{% endblock %}