{{ $ := .root }}
{{ $page := .page }}

<!-- Projects widget -->
<div class="row">
  <div class="col-xs-12 col-md-4 section-heading">
    <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
    {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
  </div>
  <div class="col-xs-12 col-md-8">
    {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}

    {{ $filter_default := default (int $page.Params.filter_default) 0 }}
    {{ with $page.Params.filter }}
    <span class="hidden default-project-filter">{{ (index $page.Params.filter ($filter_default)).tag }}</span>
    {{ end }}

    {{ if and (($page.Params.filter) (gt (len $page.Params.filter) 1)) }}
    <div class="project-toolbar">
      <div class="project-filters">
        <div class="btn-toolbar">
          <div class="btn-group">
            {{ range $idx, $item := $page.Params.filter }}
              <a href="#" data-filter="{{ .tag }}" class="btn btn-primary btn-large{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
    {{ end }}

    {{ if eq $page.Params.view 0 }}

    <div class="row isotope projects-container js-layout-row">
        {{ range where $.Site.RegularPages "Type" "project" }}
        <div class="col-md-12 project-item isotope-item {{ delimit .Params.tags " " }}" itemscope itemtype="http://schema.org/CreativeWork">
          <i class="fa fa-files-o pub-icon" aria-hidden="true"></i>

          <span class="project-title">
          {{ if .Content }}
          <a href="{{ .Permalink }}">
          {{ else }}
            {{ with .Params.external_link }}<a href="{{ . }}" target="_blank" rel="noopener">{{ end }}
          {{ end }}
          {{ .Title }}
          {{ if .Content }}</a>{{ else }}{{ with .Params.external_link }}</a>{{ end }}{{ end }}
          </span>
          {{ with .Params.summary }}<p class="project-summary">{{ . | markdownify }}</p>{{ end }}
        </div>
        {{ end }}
    </div>

    {{ else }}

    <div class="row isotope projects-container js-layout-masonry">

      {{ range $project := where $.Site.RegularPages "Type" "project" }}
      {{ $.Scratch.Set "project_url" $project.Permalink }}
      {{ $.Scratch.Set "target" "" }}
      {{ if $project.Params.external_link }}
      {{   $.Scratch.Set "project_url" $project.Params.external_link }}
      {{   $.Scratch.Set "target" "target=\"_blank\"" }}
      {{ end }}
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 project-item isotope-item {{ delimit .Params.tags " " }}">
        <div class="card">
          {{ with $project.Params.image_preview }}
          <a href="{{ $.Scratch.Get "project_url" }}" title="" class="card-image hover-overlay"
             {{ $.Scratch.Get "target" | safeHTMLAttr }}>
            <img src="{{ "/img/" | relURL }}{{ . }}" alt="" class="img-responsive">
          </a>
          {{ end }}
          <div class="card-text">
            <h4><a href="{{ $.Scratch.Get "project_url" }}" {{ $.Scratch.Get "target" | safeHTMLAttr }}>{{ .Title }}</a></h4>
            <div class="card-desription">
              {{ with $project.Params.summary }}<p>{{ . | markdownify }}</p>{{ end }}
            </div>
          </div>
        </div>
      </div>
      {{ end }}

    </div>

    {{ end }}

  </div>
</div>