{{ header }} {{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-modification" data-toggle="tooltip" title="{{ button_save }} " class="btn btn-primary"><i class="fa fa-save"></i></button>
          {% if refresh %} <button type="submit" onclick="$('#form-modification').attr('action', '{{ refresh }} ').submit()" data-toggle="tooltip" title="{{ button_refresh }} " class="btn btn-primary"><i class="fa fa-save"></i> + <i class="fa fa-refresh"></i></button>{% endif %}
        <a href="{{ cancel }} " data-toggle="tooltip" title="{{ button_cancel }} " class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }} </h1>
      <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
            <li><a href="{{ breadcrumb.href }} ">{{ breadcrumb.text }} </a></li>
          {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
      {% if error_warning %}
        <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
      {% endif %}
      {% if success %}
        <div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> {{ success }}
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
      {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }} </h3>
        <i class="fa {% if modification.status %} fa-check-circle-o fa-2x pull-right text-success{% else %}fa-times-circle-o fa-2x pull-right text-danger{% endif %}" style="font-size:2em" data-toggle="tooltip" title="{{ text_enabled }} "></i>
      </div>
      <div class="panel-body">
        <form action="{{ action }} " method="post" enctype="multipart/form-data" id="form-modification" class="form-horizontal">
            {% if error_xml %} <div class="text-danger">{{ error_xml }} </div>{% endif %}
          <textarea name="xml" id="input-xml" class="form-control">{{ modification.xml|escape }}</textarea>
        </form>
      </div>
    </div>
  </div>
</div>
<style type="text/css">
  #input-xml + .CodeMirror {
    height: auto;
  }
</style>
<script type="text/javascript"><!--
	var el = document.getElementById("input-xml");
	if (el) {
		editor = CodeMirror.fromTextArea(el, {
			mode: "xml",
			integer: 2,
			lineNumbers: true,
			viewportMargin: Infinity,
			autofocus: true,
			alignCDATA: true,
			lineWrapping: true,
			indentWithTabs: true,
			indentUnit: 2,
			styleActiveLine: true,
			autoCloseTags: true
		});

		if (editor) {
			var editorChanged = false;

			editor.on('change', function(){
				if (editorChanged == false) {
					window.onbeforeunload = function() {
						return 'Confirm that you want to leave - data you have entered may not be saved';
					}
				}

				editorChanged = true;
			});

			$('#form-modification').bind('submit',function() {
				$(this).addClass('form-saving');

				if (editorChanged) {
					window.onbeforeunload = null;
				}
			});
		}
	}
	//--></script>
{{ footer}}