{% extends 'layouts/admin.twig' %}

{% block content %}
    {% include 'wisebee/admin/partials/_wisebeeSettingsStyles.twig' %}

    <style>
        .settings-container {
            max-width: 900px;
        }
    </style>

    <ul class="breadcrumbs el">
        <li><a href="/admin/">Admin</a> /</li>
        <li><a href="/admin/wisebee/consultations">Wisebee</a> /</li>
        <li class="end">Remote Settings</li>
    </ul>
    <h1>Remote Settings</h1>

    <div class="settings-container wisebee-settings">

    {% if success is not empty %}
        <div class="alert alert-success">{{ success }}</div>
    {% endif %}

    <div id="settings-error" class="alert alert-error" style="display:none;"></div>

    {% if error %}
        <div class="alert alert-error">{{ error }}</div>
    {% else %}
        <form method="POST" action="{{ route('wisebee-admin-remote-settings-store') }}">

            {% include 'wisebee/admin/partials/_wisebeeSettingsFields.twig' with {
                idPrefix: 'rs_',
                namePrefix: 'settings[',
                nameSuffix: ']',
                settings: settings
            } %}

            <div class="actions-row">
                <input type="submit" value="Save Settings" class="btn-primary">
            </div>
        </form>

        {% include 'wisebee/admin/partials/_wisebeeSettingsScripts.twig' with {
            idPrefix: 'rs_',
            uploadUrl: '/admin/wisebee/remote-settings/upload-logo',
            errorElementId: 'settings-error'
        } %}

        <script>
            // Initialize color pickers on page load
            $(document).ready(function() {
                wisebeeInitColorPickers('rs_');
            });
        </script>
    {% endif %}

    </div>{# /.settings-container #}
{% endblock %}
