{#
A simple text input dialog.
title: The title.
subtitle: The HTML subtitle.
message:  The HTML message to display in the main content area.
#}

{% set title = title ?: "Input" %}
{% set subtitle = subtitle ?: "Enter value?" %}
{% set message = message ?: null %}

<div onsubmit="return false" class="remodal" data-remodal-id="input" data-remodal-options="hashTracking: false">
    <form>
        {% if title %}
            <h1 name="title">{{ title }}</h1>
        {% endif %}
        {% if subtitle %}
            <p name='subtitle' class="bigger">
                {% if context %}
                    <strong>{{ subtitle | raw }}</strong>
                {% endif %}
            </p>
        {% endif %}
        {% if message %}
            <p name='message' class="bigger">
                {{ message | raw }}
            </p>
        {% endif %}
        <p>
            <input name="input" type="text" autofocus/>
        </p>
        <div class="button-bar">
            <button name="cancel" class="button secondary"><i
                        class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</button>
            <button name="continue" class="button"><i
                        class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</button>
        </div>
    </form>
</div>

<script>
    /**
     * 
     * @param opts {title,subtitle,value,callback}
     * @private
     */
    function _doInput(opts) {
        const args = Array.prototype.slice.call(arguments, 1);
        const modal = $.remodal.lookup[$('[data-remodal-id=input]').data('remodal')];
        modal.open();

        $modal = modal.$model;
        if (opts.title) {
            $('[name=title]', $modal).text(opts.title);
        }
        if (opts.subtitle) {
            $('[name=subtitle]', $modal).html(opts.subtitle);
        }
        if (opts.value) {
            $('[name=input]', $modal).val(opts.value);
        }

        // Remove default button handlers
        $(document).off('click', '[data-remodal-id=input] .button');
        // Install new button handlers
        $(document).on('click', '[data-remodal-id=input] .button', function (e) {
            modal.close();
            switch (e.target.name) {
                case 'continue':
                    if (opts.callback) {
                        opts.callback.call(null, $('[name=input]', $modal).val());
                    }
                    break;
                case 'cancel':
                    break;
            }
        });
    }
</script>