{% import "admin/Macros/Buttons/_button.html.twig" as button %}
<div class="form-group">
    <label>Titel </label>
    <input type="text" name="konzept[name]" class="form-control" value="{{ konzept.title|default }}">
</div>
<input type="hidden" name="konzept[site]" value="{{ siteName[0].id }}">
<div class="form-group row">
    <div class="fv-row mb-10 fv-plugins-icon-container col-6">
        <label class="fs-7 fw-bold form-label required">Weiter</label>
        <input name="konzept[weiter]" id="weiter" class="form-control" value="{{ konzept.weiter|default() }}">
        <div class="fv-plugins-message-container invalid-feedback"></div>
    </div>
    <div class="fv-row mb-10 fv-plugins-icon-container col-6">
        <label class="fs-7 fw-bold form-label required">Zurück</label>
        <input name="konzept[zuruck]" id="zuruck" class="form-control" value="{{ konzept.zuruck|default() }}">
        <div class="fv-plugins-message-container invalid-feedback"></div>
    </div>
</div>
<div class="form-group">
    <label class="fs-7 fw-bold form-label">Text</label>
    <textarea name="konzept[text]" id="konzept_text" class="form-control text-editor"
              rows="3">{{ konzept.text|default() }}</textarea>
    <div class="fv-plugins-message-container invalid-feedback"></div>
</div>
<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="is-enabled" name="konzept[enabled]" value="1"
                {% if konzept.isEnabled|default == 1 %}
                    {{ konzept.isEnabled|default ? 'checked' : '' }}
                {% endif %}
        >
        <label class="custom-control-label" for="is-enabled">Aktiv ?</label>
    </div>
</div>

<div class="form-group">
    <label class="fs-7 fw-bold form-label">Bild</label>
    <input style="padding: 6px;" id="konzept_bild" type="file" class="form-control" name="bild" accept="image/*"/>

    <div class="fv-plugins-message-container invalid-feedback"></div>

    {% if konzept.imageFile|default != '' %}
        <div class="fv-row mb-10 fv-plugins-icon-container col-6">
            {% set dir = getKonzeptImageDir() %}
            {% set imageFullPath = dir|default~konzept.imageFile|default %}
            <img style="max-width: 50%;" src="{{ asset(imageFullPath) }}">
        </div>
    {% endif %}
</div>

<div class="d-flex justify-content-end">
    {{ button.button_submit() }}
</div>

{% block javascripts %}
    <script src="{{ asset('assets/admin/app-assets/vendors/js/forms/ckeditor/ckeditor.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var editor = CKEDITOR.replace('konzept_text');
            editor.on("change", function (evt) {
                $('#konzept_text').html(evt.editor.getData());
            });
        });
    </script>
{% endblock %}