{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="submit" form="form-theme" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
        <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a>
      </div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-list"></i> {{ text_form }}</div>
      <div class="card-body">
        <form id="form-theme" action="{{ save }}" method="post" data-oc-toggle="ajax">
          <div class="row mb-3 required">
            <label for="input-route" class="col-sm-2 col-form-label required">{{ entry_store }}</label>
            <div class="col-sm-10">
              <select name="store_id" id="input-store" class="form-select">
                <option value="0">{{ text_default }}</option>
                {% for store in stores %}
                  <option value="{{ store.store_id }}"{% if store.store_id == store_id %} selected{% endif %}>{{ store.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label">{{ entry_status }}</label>
            <div class="col-sm-10">
              <div class="form-check form-switch form-switch-lg">
                <input type="hidden" name="status" value="0"/>
                <input type="checkbox" name="status" value="1" id="input-status" class="form-check-input"{% if status %} checked{% endif %}/>
              </div>
            </div>
          </div>
          <fieldset>
            <legend>{{ text_code }}</legend>
            <div class="alert alert-info"><i class="fa-solid fa-info-circle"></i> {{ text_twig }}</div>
            <div class="input-group input-group-lg mb-3">
              <div class="input-group-text">{{ entry_route }}</div>
              <select name="route" id="input-route" class="form-select">
                <option value=""></option>
                <optgroup label="{{ text_default }}">
                  {% for template in templates %}
                    <option value="{{ template }}"{% if template == route %} selected{% endif %}>{{ template }}</option>
                  {% endfor %}
                </optgroup>
                <optgroup label="{{ text_extension }}">
                  {% for extension in extensions %}
                    <option value="{{ extension }}"{% if extension == route %} selected{% endif %}>{{ extension }}</option>
                  {% endfor %}
                </optgroup>
              </select>
            </div>
            <textarea name="code" id="input-code" rows="10" class="form-control">{{ code }}</textarea>
          </fieldset>
          <input type="hidden" name="theme_id" value="{{ theme_id }}" id="input-theme-id"/>
        </form>
      </div>
    </div>
  </div>
</div>
<link href="view/javascript/codemirror/lib/codemirror.css" rel="stylesheet"/>
<link href="view/javascript/codemirror/theme/monokai.css" rel="stylesheet"/>
<script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/mode/xml/xml.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(e) {
    // Initialize codemirrror
    var codemirror = CodeMirror.fromTextArea(document.querySelector('#input-code'), {
        mode: 'text/html',
        lineNumbers: true,
        lineWrapping: true,
        autofocus: true,
        theme: 'monokai'
    });

    codemirror.setSize('100%', '500px');
});

$('#input-route').on('change', function(e) {
    var element = this;

    $.ajax({
        url: 'index.php?route=design/theme.template&user_token={{ user_token }}&store_id=' + $('#input-store').val() + '&path=' + $('#input-route').val(),
        dataType: 'json',
        beforeSend: function() {
            $(element).prop('disabled', true);
        },
        complete: function() {
            $(element).prop('disabled', false);
        },
        success: function(json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + '  <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + '  <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            var codemirror = $('.CodeMirror')[0].CodeMirror;

            codemirror.setValue(json['code']);
            codemirror.setSize('100%', '500px');
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
//--></script>
{{ footer }}
