{% extends "layouts/main.html.twig" %}

{% block content %}

<div id="wrapper" style="padding-bottom: 0px;">

  <!-- Partners Carousel -->
  {% if partners is defined and partners is not empty %}
      <section class="hidden-sm hidden-xs container-fluid size_module_container partners_section">
          <div class="owl-carousel margin_home_pages_carousel noMarg" data-plugin-options='{"singleItem": false, "autoPlay": true, "navigation": false, "pagination": false, "transitionStyle":"backSlide", "itemsScaleUp":true, "items": 8}'><!-- transitionStyle: fade, backSlide, goDown, fadeUp,  -->
              {% for p in partners %}
                  <div class="isotope-item col-xs-12"><!-- item -->
                      <div class="item-box no_vertical_marg">
                          <figure>
                              <a class="item-hover" href="{% if p.Img[0].Link is defined and p.Img[0].Link is not empty %}/{{ p.Img[0].Link }}{% else %}/{{ p.Name }}{% endif %}">
                              </a>
                              {% if p.Img[0] is defined and p.Img[0] is not null %}
                                  <img class="img-responsive image_centered" src="{{ p.Img[0].src['brand'] }}" alt="{{ p.Img[0].AltText }}">
                              {% elseif default_child_image is defined and default_child_image is not empty %}
                                  <img class="img-responsive image_centered" src="{{ default_child_image[0].src['brand'] }}" alt="{{ default_child_image[0].AltText }}">
                              {% else %}
                                  {# Don't show images #}
                              {% endif %}
                          </figure>
                      </div>
                  </div>
              {% endfor %}
          </div>
      </section>
  {% endif %}
  <!-- /Partners Carousel -->

    {% if topgallery is defined and topgallery is not empty %}
        {% if topgallerymobile is defined and topgallerymobile is not empty %}
            <div id="top_gallery_m_code">
                <!--{{ include ("layouts/main/default_top_gallery_mobile.html.twig", ignore_missing = true) }}-->
            </div>
            <div id="top_gallery_d_code">
                <!--{{ include ("layouts/main/default_top_gallery_desktop.html.twig", ignore_missing = true) }}-->
            </div>
        {% else %}
            <div id="top_gallery_d_code">
                <!--{{ include ("layouts/main/default_top_gallery_desktop.html.twig", ignore_missing = true) }}-->
            </div>
        {% endif %}
    {% endif %}

    <!-- Summary -->
    <section class="container-fluid white_background size_module_container">
        <div class="homepage_gallery_container">
            {% if gallery is defined and gallery is not empty %}
                {% if gallery|length == 1 %}
                    {% if gallery[0].Link is defined and gallery[0].Link is not empty %}
                        <a class="pull-right inner img-thumbnail lightbox" href="{{ gallery[0].Link }}">
                            <img class="img-responsive" src="{{ gallery[0].src['galleryBig4x3_nofit'] }}" alt="{{ gallery[0].AltText }}" />
                        </a>
                    {% else %}
                        <a class="pull-right inner img-thumbnail lightbox" href="{{ gallery[0].src['_'] }}" data-plugin-options='{"type":"image"}'>
                            <img class="img-responsive" src="{{ gallery[0].src['galleryBig4x3_nofit'] }}" alt="{{ gallery[0].AltText }}" />
                        </a>
                    {% endif %}

                    <h4 class="size_module_title centered">{{ page.Title }}</h4>

                    <!-- Summary -->
                    {% if page.Summary is defined and page.Summary is not empty %}
                        <h4 class="size_module_title" style="font-weight: 300 !important;">{{ page.Summary|raw }}</h4>
                    {% endif %}
                    <!-- End Summary -->

                    <!-- Content -->
                    {% if page.Content is defined and page.Content is not empty %}
                        <div class="marg_top_10">{{ page.Content|raw }}</div>
                    {% endif %}
                    <!-- End Content -->

                    <!-- Content2 -->
                    {% if page.Content2 is defined and page.Content2 is not empty %}
                        <div class="marg_top_10">{{ page.Content2|raw }}</div>
                    {% endif %}
                    <!-- End Content2 -->
                {% else %}
                    <div class="hompage_gallery">
                      {% if gallery is defined and gallery is not empty %}
                        {% if gallerymobile is defined and gallerymobile is not empty %}
                          {% for photo in gallerymobile %}
                              <div class="hidden-sm hidden-md hidden-lg col-xs-12 noPad centered" style="margin-bottom: 20px;">
                                  {% if photo.Link is defined and photo.Link is not empty %}
                                      <a class="" href="{{ photo.Link }}">
                                          <img class="img-responsive" src="{{ photo.src['item4x3_nofit'] }}" alt="{{ photo.AltText }}" />
                                      </a>
                                  {% else %}
                                      <a href="{{ photo.src['galleryMid4x3_nofit'] }}" data-plugin-options='{"type":"image"}'>
                                          <img class="img-responsive" src="{{ photo.src['item4x3_nofit'] }}" alt="{{ photo.AltText }}" />
                                      </a>
                                  {% endif %}
                              </div>
                          {% endfor %}
                          {% for photo in gallery %}
                              <div class="hidden-xs col-sm-6 centered" style="margin-bottom: 20px; padding-left: 10px; padding-right: 10px;">
                                  {% if photo.Link is defined and photo.Link is not empty %}
                                      <a class="" href="{{ photo.Link }}">
                                          <img class="img-responsive" src="{{ photo.src['galleryMid4x3_nofit'] }}" alt="{{ photo.AltText }}" />
                                      </a>
                                  {% else %}
                                      <a href="{{ photo.src['galleryMid4x3_nofit'] }}" data-plugin-options='{"type":"image"}'>
                                          <img class="img-responsive" src="{{ photo.src['galleryMid4x3_nofit'] }}" alt="{{ photo.AltText }}" />
                                      </a>
                                  {% endif %}
                              </div>
                          {% endfor %}
                        {% else %}
                          {% for photo in gallery %}
                              <div class="col-xs-12 col-sm-6 centered" style="margin-bottom: 20px;">
                                  {% if photo.Link is defined and photo.Link is not empty %}
                                      <a class="" href="{{ photo.Link }}">
                                          <img class="img-responsive" src="{{ photo.src['galleryBig4x3_nofit'] }}" alt="{{ photo.AltText }}" />
                                      </a>
                                  {% else %}
                                      <a href="{{ photo.src['_'] }}" data-plugin-options='{"type":"image"}'>
                                          <img class="img-responsive" src="{{ photo.src['galleryBig4x3_nofit'] }}" alt="{{ photo.AltText }}" />
                                      </a>
                                  {% endif %}
                              </div>
                          {% endfor %}
                      {% endif %}
                    {% endif %}
                    </div>
                    <!-- Partners Carousel -->
                    {% if partners is defined and partners is not empty %}
                        <div class="hidden-sm hidden-md hidden-lg container-fluid size_module_container" style="display:inline">
                            <div class="owl-carousel owl-lazy margin_home_pages_carousel noMarg" data-plugin-options='{"singleItem": false, "autoPlay": true, "navigation": false, "pagination": false, "transitionStyle":"backSlide", "itemsScaleUp":true, "items": 8}'><!-- transitionStyle: fade, backSlide, goDown, fadeUp,  -->
                                {% for p in partners %}
                                    <div class="isotope-item col-xs-12"><!-- item -->
                                        <div class="item-box no_vertical_marg">
                                            <figure class="btn-like">
                                                <a class="item-hover" href="{% if p.Img[0].Link is defined and p.Img[0].Link is not empty %}/{{ p.Img[0].Link }}{% else %}/{{ p.Name }}{% endif %}">
                                                </a>
                                                {% if p.Img[0] is defined and p.Img[0] is not null %}
                                                    <img class="img-responsive image_centered" src="{{ p.Img[0].src['brand'] }}" alt="{{ p.Img[0].AltText }}">
                                                {% elseif default_child_image is defined and default_child_image is not empty %}
                                                    <img class="img-responsive image_centered" src="{{ default_child_image[0].src['brand'] }}" alt="{{ default_child_image[0].AltText }}">
                                                {% else %}
                                                    {# Don't show images #}
                                                {% endif %}
                                                <figcaption>See All</figcaption>
                                            </figure>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    <!-- /Partners Carousel -->

                    <!-- Title carousel -->
                    <div class="col-xs-12">
                        {% if titlegallery is defined and titlegallery is not empty %}
                            {% if titlegallerymobile is defined and titlegallerymobile is not empty %}
                                <div id="title_gallery_m_code">
                                    <!--{{ include ("layouts/main/default_title_gallery_mobile.html.twig", ignore_missing = true) }}-->
                                </div>
                                <div id="title_gallery_d_code">
                                    <!--{{ include ("layouts/main/default_title_gallery_desktop.html.twig", ignore_missing = true) }}-->
                                </div>
                            {% else %}
                                <div id="title_gallery_d_code">
                                    <!--{{ include ("layouts/main/default_title_gallery_desktop.html.twig", ignore_missing = true) }}-->
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                    <!-- /Title carousel -->

                    <!-- Homepage Pages -->
                    {% if homepage_pages is defined and homepage_pages is not empty %}
                        <section class="col-xs-12 noPad" style="margin-top: -8px;">
                            {% for hompag in homepage_pages %}
                                <div class="isotope-item col-xs-6 col-sm-3 development padding_two_colums_container"><!-- item -->
                                    <div class="item-box new_margin_two_colums">
                                        <figure>
                                            <a class="item-hover" href="/{{ hompag.Path }}">
                                            </a>
                                            {% if hompag.image.image is defined %}
                                                <img class="img-responsive image_homepage" src="{{ hompag.image.src['item4x3_nofit'] }}" alt="{{ hompag.image.AltText }}">
                                            {% endif %}
                                        </figure>
                                <!--        <div class="item-box-desc padding_two_colums hidden">
                                            <a href="/{{ hompag.Path }}">
                                                <h6 class="centered_title nomargin same_height_pages_title small_font_two_colums">{{ hompag.Title }}</h6>
                                            </a>
                                        </div>  -->
                                    </div>
                                </div>
                            {% endfor %}
                        </section>
                    {% endif %}
                    <!-- /Homepage Pages -->

                    <!-- Featured Products -->
                    {% if featured is defined and featured is not empty %}
                        <section class="container-fluid col-xs-12 featured size_module_container" style="margin-top: 18px !important;">
                            <h4 class="centered size_module_title">Featured Products</h4>
                            <!-- Carousel of Categories -->
                            <div class="owl-carousel owl-lazy margin_home_pages_carousel" data-plugin-options='{"lazyLoad": true, "lazyFollow": true, "singleItem": false, "autoPlay": true, "navigation": false, "pagination": false, "transitionStyle":"backSlide", "itemsScaleUp":true}'><!-- transitionStyle: fade, backSlide, goDown, fadeUp,  -->
                                {% for p in featured %}
                                    <div class="isotope-item col-xs-12"><!-- item -->
                                        {{ include ('layouts/main/default_product.html.twig', ignore_missing = true) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </section>
                    {% endif %}
                    <!-- /Featured Products -->

                    <div class="container col-xs-12 margBottom">
                        <h4 class="size_module_title centered">{{ page.Title }}</h4>

                        <!-- Summary -->
                        {% if page.Summary is defined and page.Summary is not empty %}
                            <h4 class="size_module_title" style="font-weight: 300 !important;">{{ page.Summary|raw }}</h4>
                        {% endif %}
                        <!-- End Summary -->

                        <!-- Content -->
                        {% if page.Content is defined and page.Content is not empty %}
                            <div class="marg_top_10">{{ page.Content|raw }}</div>
                        {% endif %}
                        <!-- End Content -->

                        <!-- Content2 -->
                        {% if page.Content2 is defined and page.Content2 is not empty %}
                            <div class="col-sm-12 marg_top_10">{{ page.Content2|raw }}</div>
                        {% endif %}
                        <!-- End Content2 -->
                            <div class="col-sm-12 col-md-6 lower-content-img">
                              <!-- 47 years old badge, hidden til 48 is created
                              <img src="/application/views/_responsive/cameracentre/src/img/camera-47years-badge.jpg" alt="47 years badge"/>
                              -->
                            </div>
                    </div>
                {% endif %}
            {% else %}
                <h4 class="size_module_title centered">{{page.Title}}</h4>

                <!-- Summary -->
                {% if page.Summary is defined and page.Summary is not empty %}
                    <h4 class="size_module_title" style="font-weight: 300 !important;">{{ page.Summary|raw }}</h4>
                {% endif %}
                <!-- End Summary -->

                <!-- Content -->
                {% if page.Content is defined and page.Content is not empty %}
                    <div class="marg_top_10">{{ page.Content|raw }}</div>
                {% endif %}
                <!-- End Content -->

                <!-- Content2 -->
                {% if page.Content2 is defined and page.Content2 is not empty %}
                    <div class="marg_top_10">{{ page.Content2|raw }}</div>
                {% endif %}
                <!-- End Content2 -->
            {% endif %}
        </div>
    </section>
    <!-- End Summary -->

    {{ include ('layouts/main/callout.html.twig', ignore_missing = true) }}

</div>

{% endblock %}