{# sample-portal-communication-brick/tile.html.twig #}
{# Communication brick tile layout #}

{% set sCarouselId = 'communication-carousel-' ~ brick.GetId %}

{% block pPageLiveScripts %}
	<script type="text/javascript">
		$(document).ready(function(){
			$('.slide .item').on('click', function() {
				var sContentHtml = $(this).find('.message-body').html();
				var sIconHtml = $(this).find('.message-banner').html() || '';
				var sTitleHtml = $(this).find('.message-title').html() || '';
				$('#carousel-popup-modal .modal-body').html(sContentHtml);
				$('#carousel-popup-modal .modal-title').html('<a>'+sIconHtml+'</a>&nbsp;'+sTitleHtml);
				$('#carousel-popup-modal').modal('show');
			});
			$('.slide .item a').on('click', function(ev) { ev.stopPropagation(); } ); // Hyperlinks are still clickable
		});
	</script>
{% endblock %}

{%  if message_count > 0 %}
	{% block pTileWrapper %}
	<div class="col-xs-12 col-sm-{{ brick.GetWidth }}">
		<div class="tile tile_communication" id="brick-{{ brick.GetId }}" data-brick-id="{{ brick.GetId }}">
			<div class="carousel slide text-center" id="{{ sCarouselId }}" data-ride="carousel" style="height: {{ brick.GetHeight }}em;">
				<div class="carousel-inner text-center" role="listbox">
					{% for message in messages %}
						<div class="item{% if loop.index0 == 0 %} active{% endif %}{% if message.Get('icon') != 'none' %} has-type message-type-{{ message.Get('icon') }}{% else %} has-no-type {% endif %}{% if message.Get('title') != '' %} has-title{% endif %}">
							
							{% if message.Get('icon') != 'none' %}
								<a><div class="message-banner tile_decoration"><span class="icon fas fa-{{ message.GetFontAwesomeIcon }} fa-2x"></span></div></a>
							{% endif %}
							<div class="message-content tile_body">
								{% if message.Get('title')  != '' %}
									<div class="message-title tile_title">{{ message.GetAsHTML('title') | raw }}</div>
								{% endif %}
								<div class="message-body tile_description">{{ message.GetAsHTML('message') | raw }}</div>
							</div>
						</div>
					{% endfor %}
				</div>
				{% if message_count > 1 %}
					<ol class="carousel-indicators">
						{% for message in messages %}
							<li data-target="#{{ sCarouselId }}" data-slide-to="{{ loop.index0 }}" class="{% if loop.index0 == 0 %}active{% endif %}"></li>
						{% endfor %}
					</ol>
					<a class="left carousel-control" href="#{{ sCarouselId }}" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">{{ 'Portal:Communication:Previous'|dict_s }}</span>
					</a>
					<a class="right carousel-control" href="#{{ sCarouselId }}" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">{{ 'Portal:Communication:Next'|dict_s }}</span>
					</a>
				{% endif %}
			</div>
		</div>
	</div>
<div class="modal fade" tabindex="-1" role="dialog" id="carousel-popup-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'UI:Button:Ok'|dict_s }}</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
	{% endblock %}
{% endif %}