{% extends ('layouts/install.twig') %}

{% block content %}

    <form role="form" method="post">
        <fieldset>
            <legend>Pages</legend>
            <div class="form-group">
                <label for="pages_structure">Pages Setup</label>
                <span class="help-block">
                    The page structure defined here will be the pages the CMS starts off with. Select installed setups or create your own by editing the textarea below. Textarea will turn red if JSON is invalid. Feel free to use
                        <a
                            href="http://www.jsoneditoronline.org/"
                            target="_blank"
                        >
                            JSON Editor Online.
                        </a>
                </span>
                <select class="form-control" id="pages_structures" name="pages_structures">
                    {% for pages_setup in pages_setup_list %}
                        <option
                            data-setup="{{ pages_setup['setup'] }}"
                            value="{{ pages_setup['filename'] }}"
                        >
                            {{ pages_setup['name'] }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <textarea
                    class="form-control"
                    name="pages_structure"
                    id="pages_structure"
                    rows="20"
                >
                </textarea>
            </div>
        </fieldset>
        <div class="form-group">
            <input type="hidden" name="action" value="save" />
            <button type="submit" class="btn btn-primary">Setup</button>
        </div>
    </form>
    <script type="text/javascript">
        $(function() {
            $("#pages_structure").val($("#pages_structures option:selected").attr("data-setup"));
            $("#pages_structures").on("change", function() {
                $("#pages_structure").val($("#pages_structures option:selected").attr("data-setup"));
            });
            $("#pages_structure").on("change", function () {
                try {
                    JSON.parse($(this).val());
                    $("#pages_structure").css({
                        "border-color": "",
                        "background-color": ""
                    });
                } catch (e) {
                    $("#pages_structure").css({
                        "border-color": "red",
                        "background-color": "#f9f2f4"
                    });
                    return;
                }
            });
        });
    </script>

{% endblock %}
