{% extends "_layout" %}

{% block content %}
<div class="wrapper">

		<!-- START: BANNER -->
		<div class="banner_wrapper">
<!--			<div class="ms-fullscreen-template" id="slider1-wrapper">-->
				<!-- masterslider -->
                <!-- To change options of slider go to masterslider.js :4014  -->
				<div class="carousel slide" id="myCarousel" data-ride="carousel">
                        <ol class="carousel-indicators">
                          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                          <li data-target="#myCarousel" data-slide-to="1"></li>
                          <li data-target="#myCarousel" data-slide-to="2"></li>
                          <li data-target="#myCarousel" data-slide-to="3"></li>
                        </ol>
                   <div class="carousel-inner" role="listbox" style="position: relative; width: 100%; overflow: hidden;">
                        {% for entry in craft.entries.section('news').limit(4).find() %}

                            <div class="item {% if loop.first %}active{% endif %}">
                                {% set image = entry.banner.first() %}
                                {% if image %}
                                    <img src="{{ image.url('homepageSlider') }}" data-src="{{ image.url }}" alt="{{ entry.title }}" height="{{ image.getHeight('homepageSlider')}}" style="width:100%"/>
                                {% endif %}
                                <div class="carousel-caption">
                                    <h2>{{ entry.title }}</h2>
                                    <a href="{{ entry.url }}">Read more...</a>
                                </div>
                            </div>

                        {% endfor %}
                    </div>
				</div>
				<!-- end of masterslider -->
<!--			</div>-->
		</div>
		<!-- END: BANNER -->

	<!--Start Main Content-->
		<div class="storyBlock">
			<ul>
                {% for linkBlock in entry.latestItems %}
				<li class="ltNews">
					<div>
                        {% set image = linkBlock.blockImage.first() %}
                        {% if image %}
						  <img src="{{ image.url }}" alt="">
                        {% endif %}
                            <div class="storyOverlay">
                                  <a href="{{ linkBlock.blockLink }}" class="newsBox">
                                          <span>{{ linkBlock.blockTitle }}
                                              {# {% if linkBlock.blockDate %}
                                                 <small>{{ linkBlock.blockDate | date('F d Y') }}</small>
                                              {% endif %} #}
                                          </span></a>
                            </div>
					</div>
				</li>
                {% endfor %}
			</ul>
		</div>

		{% if entry.eventCoverage %}
		<div class="container newsBlock">
			<div class="row" id="latestNews">
				<!--<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
					<h2>LIVE RACE COMMENTARY</h2>
					<div class="liveCommentary">
					<h2 style='{{ entry.eventTitleStyles }}'>{{ entry.eventTitleText }}</h2>
					<iframe src='{{ entry.coveritliveEmbedCode }}' {{ entry.coverItLiveStyles }}></iframe>



					</div>
				</div>-->
				<div class="col-xs-12">

				{% if entry.videoEmbed|length > 0 %}
					<iframe width="100%" height="500" src="{{ entry.videoEmbed }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


				{% else %}

				<h2 class="">Live tracking</h2>
					<div class="raceTracking">
                   <iframe src="{{ entry.tractracLink }}{{ entry.tractracUrlOptions }}" frameborder="0" width="100%" height="429px"></iframe>
                        <p>View fullscreen tracking <a href="{{ entry.tractracLink }}" target="_blank">here</a></p>
                    </div>


				{% endif %}
				</div>
			</div>
		</div>
        {% endif %}

				<div class="container" id="standgBlock">
			<div class="row">
            	{% set standings = craft.entries.section('homepageStandings') %}
                    {% for standingTable in standings %}
                        {% if standingTable.title == 'Fleet' %}

                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        	<h2>{{ standingTable.resultsTableTitle }}</h2>
                            <div class="standingTable">
                                <ul class="standTableHead">
                                    <li>Pos</li>
                                    <li>Nat</li>
                                    <li class="team">Team</li>
                                    <li>Points</li>
                                </ul>
                                {% for fleetStandings in standingTable.homepageStandings %} {# loops through superTable fields #}
                                    <ul class="standTableCont">
                                        <li class="number">{{ fleetStandings.position }}</li>
                                            {% for team in fleetStandings.team %}
                                                {% set nation = team.teamCountry.first() %}
                                                {% set flag = nation.flag.first() %}

												<li class="nat"><img src="/images/{{ flag.filename }}" alt="{{ nation.title }}">{{ nation.shortCode }}</li>
												<li class="team">{{ team.title }}</li>
												<li>{{ fleetStandings.points }}</li>

                                            {% endfor %}
                                    </ul>
                                {% endfor %}
                            </div>
                            </div>

                        {% endif %}
                        {% if standingTable.title == 'Match' %}
                        	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
							<h2>{{ standingTable.resultsTableTitle }}</h2>
                        	<div class="standingTable">
                                <ul class="standTableHead">
                                    <li>Pos</li>
                                    <li>Nat</li>
                                    <li class="team">Team</li>
                                    <li>Points</li>
                                </ul>
                                {% for fleetStandings in standingTable.homepageStandings %} {# loops through superTable fields #}
                                    <ul class="standTableCont">
                                        <li class="number">{{ fleetStandings.position }}</li>
                                            {% for team in fleetStandings.team %}
                                                {% set nation = team.teamCountry.first() %}
                                                {% set flag = nation.flag.first() %}
                                                <li class="nat"><img src="/images/{{ flag.filename }}" alt="{{ nation.title }}">{{ nation.shortCode }}</li>
                                                <li class="team">{{ team.title }}</li>
                                                <li>{{ fleetStandings.points }}</li>
                                            {% endfor %}
                                    </ul>
                                {% endfor %}
                            </div>
                            </div>
                        {% endif %}
                        {% endfor %}
				</div>

				<div class="viewAll"><a href="/results">VIEW ALL RESULTS</a></div>
			</div>
		</div>
		<!--End Main Content-->

</div>

{% endblock %}