{% extends "forms/field.html.twig" %}

{% set whitelabel = config.plugins.admin.whitelabel %}
{% set theme = whitelabel.codemirror_theme ?? 'paper.css' %}
{% set fontsize = whitelabel.codemirror_fontsize ?? 'lg' %}

{% set value = value ?? field.default|t %}
{% if not codemirrorOptions %}
    {% set codemirrorOptions = {'mode': 'gfm', 'theme': theme, 'ignore': ['code', 'preview'], 'font': 'mono'}|merge(field.codemirror|default({})) %}
{% endif %}

{% if codemirrorOptions.theme %}
    {% do assets.addCss(theme_url ~ '/css/codemirror/themes/' ~ codemirrorOptions.theme ~ '.css') %}
{% endif %}

{% block field %}
    {% block label %}
        {% if field.label %}
            {% if field.help %}
                {% set hint = 'data-hint="' ~ field.help|t|raw ~ '"' %}
            {% endif %}
            <div class="form-label form-field hint--bottom" {{ hint|raw }}>
                {{ field.label|t|raw }}
                {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
            </div>
        {% endif %}
    {% endblock %}
    <div class="form-field {{ field.classes|default('') }}">
        <div class="form-data grav-editor">
            <div class="grav-editor-content is-active fontsize-{{ codemirrorOptions.font_size|default(fontsize) }} fontfamily-{{ codemirrorOptions.font }}">
                {% set input_value = value is iterable ? value|join("\n") : value|string %}
                <textarea
                    data-grav-editor="{{ {'codemirror': codemirrorOptions} | json_encode|e('html_attr') }}"
                    data-grav-editor-mode="editor"
                    name="{{ (scope ~ field.name)|fieldName }}"
                    {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                    {% if field.id is defined %}id="{{ field.id }}" {% endif %}
                    {% if field.style is defined %}style="{{ field.style }}" {% endif %}
                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                    {% if field.placeholder %}placeholder="{{ field.placeholder|t }}"{% endif %}
                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                    {% if 'preview' not in codemirrorOptions.ignore %}data-grav-urlpreview="{{ base_url }}/media/{{ admin.route|trim('/') }}.json"{% endif %}
                >{{ input_value }}</textarea>
            </div>
            {% if field.resizer is not defined or field.resizer not in ['off', 'false', 0] %}<div class="grav-editor-resizer"></div>{% endif %}
            {% if field.description %}
                <div class="form-extra-wrapper {{ field.size }} {{ field.wrapper_classes }}">
                    <span class="form-description">
                        {% if field.markdown %}
                            {{ field.description|t|markdown(false)|raw }}
                        {% else %}
                            {{ field.description|t|raw }}
                        {% endif %}
                    </span>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}