<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("xPhotoGrapherDetail.css", "theme::css/scroll.css") }}
    {{ asset_style("xPhotoGrapherDetail.css", ["min"]) }}

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">

</head>
<body>

{% include "theme::partials/navigation" %}

<section class="grid-container full columns">
	 <section class="cell bannerProduct no-padding columns no-margin">
      <img src="{{ image(profile.profile_banner_image.cropped()).resize(1920, 554).quality(100).url() }}" alt="{{ profile.name }}"/>
  </section>
    <section class="grid-x">

        <section class="cell">
            <div class="grid-x">
                <div class="small-12 cell xPhotoGrapher xPhotoGrapherDetail">
                  <div class="sizeCenterElm">
                    <div class="grid-x">
                        <div class="medium-3 cell photographProfile">
                          <img src="{{ image(profile.profile_image.cropped()).resize(230, 230).quality(100).url() }}" alt=""/>
                        </div>
                        <div class="medium-9 cell photographRight">
                          <div class="profile">
                            <h2>{{ profile.name }}</h2>
                            <p>
                                {{ profile.profile_summary }}
                            </p>
                          </div>
                          <div class="cameraUse">
                            <h2>{{ trans('theme::page.camera') }}</h2>
                            <ul>
                                {% for camera in profile.camera_name %}
                                    <li>
                                        <img src="{{ image(camera.product_camera[0].camera_image.cropped()).resize(139, 95).url() }}"
                                             alt=""/> {# 177 x 95 #}
                                    </li>
                                {% endfor %}
                            </ul>
                          </div>
                        </div>
                        <div class="medium-12 cell photographerGallery">
                            <ul>
                                {% for gallery in profile.gallery %}
                                    <li>
                                        <img src="{{ image(gallery.photographer_gallery.cropped()).resize(339, 257).url() }}"
                                             alt=""/>
                                    </li>
                                {% endfor %}
                            </ul>
                          </div>
                      </div>
                  </div>
                  
                </div>

            </div>
        </section><!-- END homeNewsEvent -->

    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script type="text/javascript">
    global();
    // <strong>Phone</strong> <br>
    // +62-21 2128 2182 <br>
    // <strong>Fax</strong> <br>
    // +62-21 2128 2183 <br>


</script>

</body>
</html>