{% include '@dashnex/modal/support.twig' %}
{% include '@p1tm/modals/discard.twig' %}

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="deleteModalLabel">Delete Variation</h4>
			</div>
			<div class="modal-body">
				Are you sure you would like to delete this variation.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger ptm-deleteVarModal" data-dismiss="modal">Delete</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>

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

	<div class="dashnex-frame-actions">
		<div class="dashnex-frame-action-buttons">
			<button type="button" class="btn btn-default" data-toggle="modal" data-target="#p1tm-discard-modal">Discard</button>
			<button id="ptm-save-btn" class="btn btn-primary">Save</button>
		</div>
		<div class="dashnex-frame-loader-container">
			<img id="ptm-loader" class="" src="{{ asset( 'p1tm', '/img/ajax-loader.gif' ) }}">
		</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>

<div id="display-container" class="ptm-container">
	<ul class="nav nav-tabs ptm-tabs">
		<li class="active"><a href="#monetize1" data-toggle="tab">Monetize 1</a></li>
		<li><a href="#monetize2" data-toggle="tab">Monetize 2</a></li>
		<li><a href="#monetize3" data-toggle="tab">Monetize 3</a></li>
		<li><a href="#monetize4" data-toggle="tab">Monetize 4</a></li>
		<li><a href="#monetize5" data-toggle="tab">Monetize 5</a></li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content ptm-tabContent">
		{% for id, variants in sections %}
		<div class="tab-pane fade in {% if id == 1 %}active{% endif %}" id="monetize{{ id }}" data-monetize="{{ id }}">
			<div class="panel-group" id="accordion{{ id }}">
				{% for variant in variants %}
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4 class="panel-title">
							<a data-toggle="collapse" data-parent="#accordion{{ id }}" href="#{{ variant.id }}">
								<span class="glyphicon glyphicon-plus-sign"></span>
								Variation
							</a>
							<div class="pull-right">
								<a href="#" data-toggle="modal" data-target="#deleteModal" class="ptm-deleteVar"><span class="glyphicon glyphicon-trash" data-toggle="tooltip" title="Delete Variation"></span></a>
							</div>
						</h4>

					</div>
					<div id="{{ variant.id }}" class="panel-collapse collapse in">
						<div class="panel-body">
							{{ variant.content|raw }}
						</div>
						<div class="panel-overlay"></div>
					</div>
				</div>
				{% endfor %}
			</div>
			<a href="#" class="ptm-addVariation">Add Variation</a>
		</div>
		{% endfor %}
	</div>
</div>

<div id="editor-container" class="ptm-container hide">
	{{ editor( '', 'monetize_editor', { 'wpautop' : false } ) }}
	<div class="pull-right">
		<button id="ptm-editor-done-btn" type="button" class="btn btn-primary">Done</button>
		<button id="ptm-editor-cancel-btn" type="button" class="btn btn-default">Cancel</button>
	</div>
</div>