{{ define "title" }}
    {{ site.Title }} | {{ .Title }}
{{ end }}

{{ define "main" }}
<script type="application/javascript">
    function openModal(modalID) {
        $("#"+modalID).addClass("is-active")
    }

    function closeModal(modalID) {
        $("#"+modalID).removeClass("is-active")
    }
</script>
  <div class="dashboard">
      {{ partial "docs/dashboard-panel.html" . }}

    <div class="dashboard-main is-scrollable">
        {{ partial "docs/navbar.html" . }}



        <div class="integration-index">
          <nav class="navbar ecosystem-navbar">
            <div class="ecosystem-container">
              <div class="title is-1">
                OPA Ecosystem
              </div>
              <div class="is-6">
                Showcase of OPA integrations, use-cases, and related projects.
              </div>
            </div>
            <div class="container">
              <div class="navbar-menu">
                <div class="navbar-end">
                  <span class="navbar-item">
                    <a class="button is-primary is-inverted" href="https://github.com/open-policy-agent/opa/tree/master/docs#integration-index">
                      <span class="icon">
                        <i class="fab fa-github"></i>
                      </span>
                      <span>Add or Update Integration</span>
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </nav>
          {{ $scratch := newScratch }}
          {{ range $name, $integration := $.Site.Data.integrations.integrations }}
            {{ $scratch.Add "integration-names" (slice $name) }}
          {{ end }}
          {{ range $name := (sort ($scratch.Get "integration-names")) }}
          {{ $integration := (index $.Site.Data.integrations.integrations $name) }}
          <div class="integration-item" onclick="openModal('{{ $name }}-detail-modal')">
            <div class="card">
              <div class="card-image">
                <figure class="image">
                  {{ partial "docs/integration-logo.html" (dict "name" $name) }}
                </figure>
              </div>
              <div class="card-content">
                <p class="title is-6">{{- $integration.title -}}</p>
              </div>
            </div>
          </div>
          <div id="{{ $name }}-detail-modal" class="modal">
            <div class="modal-background" onclick="closeModal('{{ $name }}-detail-modal')"></div>
            <div class="modal-content has-background-light">
              <div class="media integration-details">
                <div class="media-left">
                  <figure class="image is-48x48">
                      {{ partial "docs/integration-logo.html" (dict "name" $name) }}
                  </figure>
                </div>
                <div class="media-content">
                  <p class="title is-4">{{- $integration.title -}}</p>
                  <p>{{- $integration.description -}}</p>
                  <br />

                  <div class="integration-details-labels">
                    {{ if isset $integration "labels" }}
                      {{ range $name, $value := $integration.labels }}
                        <div class="integration-label-wrapper">
                          <a class="integration-label integration-label-{{ $name }}">{{ $value }}</a>
                        </div>
                      {{ end }}
                    {{ end }}
                    {{ if isset $integration "software" }}
                        {{ range sort $integration.software }}
                          <div class="integration-label-wrapper">
                            {{ if isset $.Site.Data.integrations.software . }}
                            <a class="integration-label integration-label-software" href="{{ index (index $.Site.Data.integrations.software .) "link" }}">{{ index (index $.Site.Data.integrations.software .) "name" }}</a>
                            {{ else }}
                            <a class="integration-label integration-label-software">{{ . }}</a>
                            {{ end }}
                          </div>
                        {{ end }}
                    {{ end }}
                  </div>
                  <br />

                  {{ if isset $integration "inventors" }}
                    <p class="title is-6">Inventors</p>
                    <ul>
                        {{ range $integration.inventors }}
                            {{ if reflect.IsMap . }}
                              <li> {{ .name }} - {{ partial "docs/integration-org-link.html" (dict "org" .organization "integrations" $.Site.Data.integrations) }} </li>
                            {{ else }}
                              <li>{{ partial "docs/integration-org-link.html" (dict "org" . "integrations" $.Site.Data.integrations) }}</li>
                            {{ end }}
                        {{ end }}
                    </ul>
                    <br />
                  {{ end }}

                  {{ if isset $integration "code" }}
                  <p class="title is-6">Code</p>
                  <ul>
                  {{ range $integration.code }}
                    <li><a href="{{ . }}">{{ . }}</a></li>
                  {{ end }}
                  </ul>
                  <br />
                  {{ end }}

                  {{ if isset $integration "tutorials" }}
                  <p class="title is-6">Tutorials</p>
                  <ul>
                      {{ range $integration.tutorials }}
                        <li><a href="{{ . }}">{{ . }}</a></li>
                      {{ end }}
                  </ul>
                  <br />
                  {{ end }}

                  {{ if isset $integration "videos"}}
                  <p class="title is-6">Videos</p>
                  <ul>
                  {{ range $integration.videos }}
                      {{ if reflect.IsMap . }}
                          <li>
                            <a href="{{ .link }}">{{ .title }} - {{ .venue }}</a>
                            <ul>
                              {{ range .speakers }}
                                  {{ if reflect.IsMap . }}
                                      {{ if isset $.Site.Data.integrations.organizations .organization }}
                                        <li>{{ .name }} - {{ partial "docs/integration-org-link.html" (dict "org" .organization "integrations" $.Site.Data.integrations) }}</li>
                                      {{ else }}
                                        <li>{{ .name }} -  {{ .organization }}</li>
                                      {{end}}
                                  {{ else }}
                                    <li>{{ . }}</li>
                                  {{ end }}
                              {{ end }}
                            </ul>
                          </li>
                      {{ else }}
                          <li><a href="{{ . }}">{{ . }}</a></li>
                      {{ end }}
                      <br />
                  {{ end }}
                  </ul>
                  <br />
                  {{ end }}

                  {{ if isset $integration "blogs" }}
                  <p class="title is-6">Blogs</p>
                  <ul>
                      {{ range $integration.blogs }}
                        <li><a href="{{ . }}">{{ . }}</a></li>
                      {{ end }}
                  </ul>
                  <br />
                  {{ end }}
                </div>
                <div class="media-right">
                  <button class="delete" onclick="closeModal('{{ $name }}-detail-modal')"></button>
                </div>
              </div>
            </div>
          </div>
          {{ end }}
        </div>
    </div>
  </div>
{{ end }}