{% include '@dashnex/modal/support.twig' %}
{% include '@p1tm/modals/discard.twig' %}
{% include '@p1tm/configure-sources/modals/confirm-submit.twig' %}
{% include '@p1tm/configure-sources/modals/confirm-reset.twig' %}
{% include '@p1tm/configure-sources/modals/confirm-delete.twig' %}

<header class="dashnex-frame-header">
	<h2 class="pull-left">Content Layout</h2>

	<div class="dashnex-frame-actions">
		<div class="dashnex-frame-action-buttons">
			<button type="button" id="p1tm-config-cancel" class="btn btn-default" data-toggle="modal" data-target="#p1tm-discard-modal">Discard</button>
			<button type="button" id="p1tm-config-save" class="btn btn-primary">Save</button>
		</div>
		<div class="dashnex-frame-loader-container"></div>
		<button type="button" class="btn btn-info dashnex-frame-popover-btn">Help!</button>
	</div>

	<div class="clearfix"></div>
</header>

<div class="dashnex-frame-popover">
	<div class="dashnex-frame-popover-arrow"></div>
	<h3 class="dashnex-frame-popover-title">Help!</h3>
	<div class="dashnex-frame-popover-content">
		<p>
			<a href="http://www.dashnex.com" target="_blank">Take me to the
				membership site.</a>
		</p>
		<p>
			<a id="show-support-modal-btn" href="#">I need to email support.</a>
		</p>
	</div>
</div>

<script type="text/javascript">
/* <![CDATA[ */
var content_generators = {{ contentGenerators|raw }};
/* ]]> */
</script>

{% if messages %}
    {% for message in messages %}
    <div class="{% if message.error %}error{% else %}updated{% endif %} below-h2">
        <p>{{ message.content }}</p>
    </div>
    {% endfor %}
{% endif %}

<div class="dashnex-frame-padded-container">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 p1tm-column">
				<h4>Available Structure</h4>
				<p>
					Below is a list of available elements that you can drag/drop on the
					right to add them to your current post structure. You can also
					configure these elements before or after you include them in the
					page.<br /> To <strong>add</strong> new elements drag the elements
					of this list to the right.
				</p>
				<div class="panel-group p1tm-accordion connectedList" id="available">
					{% for generator in dynamicGenerators %}
						{% include '@p1tm/configure-sources/element.twig' %}
					{% endfor %}
				</div>
			</div>
			<div class="col-sm-6 p1tm-column2">
				<form name="config_form" method="post" class="form-horizontal">
					<h4>Current Structure</h4>
					<p>
						Below is a view of how the current page would look like in terms
						of the order of elements. You can drag/drop elements from the list
						below to manage their positioning in the page. <br /> To <strong>add</strong>
						new elements use the list on the left.
					</p>
					{% if customConfigEmpty %}
					<p>
						<strong><em class="error-message">Warning: Custom configuration is
								empty - default configuration has been applied.</em> </strong>
					</p>
					{% endif %}
					<div class="p1tm-staticSources">
						{% for generator in	staticGenerators %}
							{% set element = staticElements[generator.id] %}
							{% include '@p1tm/configure-sources/element.twig' %}
						{% endfor %}
					</div>
					<div class="current-draggable-target">
						<div class="panel-group p1tm-accordion connectedList" id="current">
							{% for element in dynamicElements %}
								{% set generator = dynamicGenerators[element.GetContentGeneratorId()] %}
								{% include '@p1tm/configure-sources/element.twig' %}
							{% endfor %}
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>