{% import 'codeeditor/codeEditor' as codeEditor %}
{% import '_includes/forms' as forms %}

{% macro configWarning(setting, docsUrl) -%}
    {{ "This is being overridden by the {setting} config setting."|t('app', {
        setting: '<a href="'~docsUrl~'" target="_blank">'~setting~'</a>'
    })|raw }}
{%- endmacro %}

{% from _self import configWarning %}

<p>Your custom CSS will be applied to the entire Control Panel.</p>

{{ forms.autosuggestField({
    label: "CSS File(s)"|t,
    instructions: "Enter the path to a separate CSS file. Multiple paths may be separated with commas. You may use aliases (ie: @web) in your filepath."|t,
    id: 'cssFile',
    name: 'cssFile',
    suggestEnvVars: true,
    suggestAliases: true,
    value: settings.cssFile,
    disabled: 'cssFile' in overrideKeys,
    warning: 'cssFile' in overrideKeys ? configWarning('cssFile', docsUrl)
}) }}

{% set monacoOptions = {
    language: 'css',
    theme: 'vs-dark',
    lineNumbers: 'on',
    lineNumbersMinChars: 4,
    lineDecorationsWidth: 6,
    folding: true,
} %}

{% set codeEditorOptions = {
    wrapperClass: 'monaco-editor-background-frame'
} %}

{{ codeEditor.textareaField({
    label: "Additional CSS"|t,
    instructions: "Enter any additional CSS here."|t,
    id: 'additionalCss',
    name: 'additionalCss',
    value: settings.additionalCss,
    rows: 15
}, 'CodeField', monacoOptions, codeEditorOptions) }}