{{ header }}
<div class="background-white bottom-margin-large"
  data-info='{ "languagesJS": {{ languageForJS|json_encode() }}, "layouts": {{ layouts|json_encode() }} }'
>
  <div class="container-fluid">
    <div class="row no-space-xs middle-xs">
      <div class="col-xs-12 col-sm col-md">
        <div class="content-box vertical-padding-large">
          <span class="text-dark text-x-large">{{ heading_title }}</span>
          <div class="adm-breadcrumb">
            {% for breadcrumb in breadcrumbs %}
							<i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
							<a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-width-auto col-md-width-auto">
        <div class="content-box vertical-padding-large flex flex-row middle-xs">
          <button class="btn-default btn-medium btn-white right-margin-small" type="button" id="add_module">
            <span>{{ button_add_module }}</span>
          </button>
          <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
						<span>{{ button_cancel }}</span>
					</a>
					<button type="button" class="btn-default btn-medium btn-primary js-submit-main-form">
						<span>{{ button_save }}</span>
					</button>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</div>
{% if error_warning %}
  <div class="warning full-width">{{ error_warning }}</div>
{% endif %}
<form action="{{ action }}" method="post" class="js-main-form">
  <div id="html_list" class="container-fluid" data-tabs-id="tab-info">
  </div>
</form>
{{ footer }}
<script>
  const LANGUAGE_ID = '{{ language_id }}',
  MODULE_KEYS = {{ module_keys }},
  MODULES = {{ modules|json_encode() }};
</script>