{{/*

  {# ------------------------------------------------------- #}
  {# INDIVIDUAL VIEW FOR EACH SCENE ITEM                     #}
  {# ------------------------------------------------------- #}
  
*/}}

{{/* meta data */}}

{{- define "og_title" -}}{{ .Title | htmlUnescape }}{{- end -}}
{{- define "og_type" -}}profile{{- end -}}
{{- define "og_url" -}}{{ .Permalink }}{{- end -}}
{{- define "og_image" -}}{{ replace .Params.primary_image "/upload/" "/upload/w_740,h_740,c_fill,g_face/" }}{{- end -}}
{{- define "og_description" -}}{{ .Summary }}{{- end -}}

{{- define "main" -}}

{{- /*

  TODO

  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "mainEntityOfPage":{
      "@type":"WebPage",
      "@id":"http://www.schmopera.com"
    },
    "headline": "{{ .Title }}",
    "image": {
      "@type": "ImageObject",
      "url": "{ item.primary_image|imageCrop(800, 800) }",
      "height": 800,
      "width": 800
    },
    "datePublished": "{ item.publish_date }",
    "dateModified": "{ item.publish_date }",
    "author": {
      {% for relation in item.authors %}
        "@type": "Person",
        "name": "{ relation.name }"
      {% endfor %}
    },
     "publisher": {
      "@type": "Organization",
      "name": "Schmopera",
      "logo": {
        "@type": "ImageObject",
        "url": "http://www.schmopera.com/static/images/logo.png",
        "width": 800,
        "height": 800
      }
    },
    "description": "{ item.short_description }"
  }
  </script>

*/ -}}

  <article class="scene--single __person">
    <header class="scene--single_masthead">
      {{ $type := (split .File.Dir "/") }}
      <h1 class="pill">The Scene</h1>
      <h1 class="pill __sub"><a href="/scene/{{ printf (index $type 1) }}">{{ printf (index $type 1) | humanize }}</a></h1>
      <h1 class="pill ___sub">{{ .Title | htmlUnescape }}</h1>
    </header>

    <section class="scene--single_hero">
      <a href="{{ .Params.primary_image }}" rel="lightbox" data-lightbox='{{ replace .Params.primary_image "/upload/" "/upload/w_1360,h_1360,c_fill,g_face/" }}' title="{{ .Title }}{{ with .Params.primary_image_credit }} - Photo by {{ . }} {{ end }}">
        <figure>
          <picture>
            {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_300,h_300,c_fill,g_face/" -}}
            {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_600,h_600,c_fill,g_face/" }}
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkkAQAAB8AG7jymN8AAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
          </picture>      

          {{- with .Params.primary_image_credit }}
          <figcaption>{{ . }}</figcaption>
          {{- end }}
        </figure>
      </a>

      <div class="single--scene_meta">
        <h3>{{ .Params.discipline }}</h3>

        {{ if or (isset .Params "social_media") (isset .Params "website") }}
        <nav class="nav--share">
        {{ if .Params.website }}
        <a href="{{ .Params.website }}" class="social--web pill" target="_blank"><i class="icon-web"></i>Website</a>
        {{ end }}
        {{ range .Params.social_media }}
          <a href="{{ .url }}" class="pill social--{{ .platform|lower }}" target="_blank"><i class="icon-{{ .platform|lower }}"></i>{{ .platform }}</a>
        {{ end }}
        </nav>
        {{ end }}
      </div>
    </section>

    <section class="scene--single_bio">
      {{ .Content }}
    </section>

    
    
    {{- /*

  {# Adspot 1 #}
    <section class="scene--single_adspot">
{% include "templates/partials/ad-spot1.html" %}
    </section>

    */ -}}

  {{- /* Related People and Companies */}}
    {{ if .Params.related_people }}
    <section class="scene--single_people">
      <h2 class="pill">Related People</h2>
      <nav class="scene--list __micro __full">
        <ul>
        {{- with .Params.related_people -}}
          {{- range $person := . -}}
            {{- with $.Site.GetPage "page" $person -}}
            <li>
                <a href="{{.Permalink}}">
                  {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_100,h_100,c_fill,g_face/" }}
                  {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_200,h_200,c_fill,g_face/" }}
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
                  <span>{{ .Title | htmlUnescape }}</span>
                </a>
            </li>
            {{- end -}}
          {{- end -}}
        {{- end -}}
        </ul>
      </nav>
    </section>
    {{ end }}

    {{ if .Params.related_companies }}
    <section class="scene--single_company">
      <h2 class="pill">Related Companies</h2>
      <nav class="scene--list __micro __full">
        <ul>
        {{- with .Params.related_companies -}}
          {{- range $company := . -}}
            {{- with $.Site.GetPage "page" $company -}}
            <li>
                <a href="{{.Permalink}}">
                  {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_100,h_100,c_fill,g_face/" }}
                  {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_200,h_200,c_fill,g_face/" }}
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
                  <span>{{ .Title | htmlUnescape }}</span>
                </a>
            </li>
            {{- end -}}
          {{- end -}}
        {{- end -}}
        </ul>
      </nav>
    </section>
    {{ end }}

  {{- /* Related Articles */}}
    <nav class="scene--single_articles">
      <h1 class="pill">Related articles</h1>

      <ul class="post--list __mini">
        {{- $entity := .File.Path -}}
        {{- $articles := where (.Site.RegularPages) "Type" "articles" -}}

        {{- $related_companies := $articles.RelatedTo ( keyVals "related_companies" $entity ) -}}
        {{- range $related_companies -}}
        <li class="post--list-item">
            <a href="{{.Permalink}}" class="post--list-item">
              <picture class="post--list-image">
                {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_370,h_245,c_fill,g_faces/" }}
                {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_740,h_490,c_fill,g_faces/" }}
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkkAQAAB8AG7jymN8AAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
              </picture>
              <div class="post--list-title">
                <h1><span title="{{ .Title | htmlUnescape }}">{{ .Title | htmlUnescape }}</span></h1>
                {{- with .Params.categories }}
                <em class="post--meta-category">{{ . }}</em>
                {{- end }}
              </div>
            </a>
          </li>
        {{- end -}}

        {{- $related_people := $articles.RelatedTo ( keyVals "related_people" $entity ) -}}
        {{- range $related_people -}}
        <li class="post--list-item">
            <a href="{{.Permalink}}" class="post--list-item">
              <picture class="post--list-image">
                {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_370,h_245,c_fill,g_faces/" }}
                {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_740,h_490,c_fill,g_faces/" }}
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkkAQAAB8AG7jymN8AAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
              </picture>
              <div class="post--list-title">
                <h1><span title="{{ .Title | htmlUnescape }}">{{ .Title | htmlUnescape }}</span></h1>
                {{- with .Params.categories }}
                <em class="post--meta-category">{{ . }}</em>
                {{- end }}
              </div>
            </a>
          </li>
        {{- end -}}          
      </ul>
    </nav> 

    <script>
      document.addEventListener('DOMContentLoaded', function() { initGallery(); });
    </script>
  </article>

{{- end -}}