{% extends "layout.html" %}
{% block title %}Admin Edit {{ link.name }}{% endblock %}
{% block body %}
    <form method="post" action="{{ url_for('admin_save') }}">
        {{ edit_form.csrf_token }}
        {{ edit_form.id(value=link.id) }}

        <div class="field is-horizontal">
            <div class="field-body">
                <div class="field column">
                    <div class="control is-expanded">
                        <div class="select is-fullwidth">
                            {{ edit_form.folder }}
                        </div>
                    </div>
                </div>

                <div class="field column is-6">
                    <div class="control is-expanded">
                        <div class="select is-fullwidth">
                            {{ edit_form.name(value=link.title.name, list='animes', class='input', placeholder='Name') }}
                            <datalist id="animes">
                                {% for title in titles %}
                                    <option {{ 'selected' if title.id == link.title.id }}
                                            data-folder-id="{{ title.folder.id }}" value="{{ title.name }}"
                                            data-keyword="{{ title.keyword }}">
                                {% endfor %}
                            </datalist>

                            <script>
                                document.getElementById('name').oninput = function (choice) {
                                    document.getElementById('animes').childNodes.forEach(function (option) {
                                        if (option.value === choice.target.value) {
                                            document.getElementById('folder').value = option.dataset.folderId;
                                            document.getElementById('keyword').value = option.dataset.keyword;
                                        }
                                    });
                                };
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal">
            <div class="field-body">
                <div class="field column is-4">
                    <div class="control is-expanded">
                        {{ edit_form.link(value=link.link, class='input', placeholder='Link') }}
                    </div>
                </div>

                <div class="field column">
                    <div class="control is-expanded">
                        {{ edit_form.season(value=link.season, class='input', placeholder='Season') }}
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal">
            <div class="field-body">
                <div class="field column is-5">
                    <div class="control is-expanded">
                        {{ edit_form.comment(value=link.comment, class='input', placeholder='Comment') }}
                    </div>
                </div>

                <div class="field column">
                    <div class="control is-expanded">
                        <div class="select is-fullwidth">
                            {{ edit_form.keyword(value=link.title.keyword, list='keywords', class='input', placeholder='Keyword') }}
                            <datalist id="keywords">
                                {% for title in titles %}
                                    <option {{ 'selected' if title.keyword == link.title.keyword }}
                                            value="{{ title.keyword }}">
                                {% endfor %}
                            </datalist>
                        </div>
                    </div>
                </div>

                <label class="checkbox">
                    <b>{{ true|flagify }}</b>
                    {{ edit_form.is_vf(value=link.vf) }}
                </label>
            </div>
        </div>

        <div class="field is-horizontal">
            <div class="field-body">
                <div class="field column">
                    <div class="control is-expanded">
                        <input class="button is-info" type="submit">
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}