video.html

{{- define "headline" }}
  <section class="container-fluid resources-headline py-md-4">
    <section class="container my-2" style="max-width: 900px !important">
      <div>
        <div class="row">
          <div class="col-12 col-xl-8">
            {{- partial "publications/resourceType.html" . }}
          </div>
          <div class="col-xl-4 d-none d-xl-flex justify-content-end align-items-center">
            <h4>tech·nic·al·ly agile</h4>
          </div>
          <div class="col-12 col-xl-8">
            <h1 class="mb-4 nkda-heading-primary">{{- .Title | markdownify }}</h1>
            {{- if .Params.subtitle }}
              <h2 class="mb-4 nkda-heading-secondary">{{- .Params.subtitle | markdownify }}</h2>
            {{ else }}
              <h2 class="mb-4 nkda-heading-secondary">{{- .Description | markdownify }}</h2>
            {{- end }}
            {{- partial "publications/craft.html" . }}
          </div>
          <div class="col-xl-4 d-none d-xl-flex justify-content-center align-items-center">
            <div class="position-relative">
              <img src="/images/technically-agile-logo.png" />
              <img src="/images/nkdagility-with-martin-hinshelwood-dark-300px.png" alt="Image" class="position-absolute top-0 end-0" style="width: 100px; height: auto;" />
            </div>
          </div>
          <div class="col-xl-12 d-none d-xl-flex justify-content-end align-items-center">
            {{ $url := "" }}
            {{ if eq .Type "resources" }}
              {{ $url = printf "https://nkdagility.com/resources/%s" .Params.ResourceId }}
            {{ else }}
              {{ $url = printf "https://nkdagility.com%s" .RelPermalink }}
            {{ end }}
            {{ $url }}
          </div>
        </div>
      </div>
    </section>
  </section>
  <section class="container my-2" style="max-width: 900px !important">
    {{- partial "publications/share-bar.html" . }}
  </section>
{{- end }}

{{- define "main" }}
  <section class="container my-5" style="max-width: 700px !important">
    <div class="ratio ratio-16x9 mb-4">
      <iframe src="https://www.youtube.com/embed/{{ .Params.videoId }}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
    </div>

    {{ $resource := .Resources.GetMatch "captions.md" }}


    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="content" aria-selected="true">Content</button>
      </li>
      {{ with $resource }}
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="transcript-tab" data-bs-toggle="tab" data-bs-target="#{{ .Name }}" type="button" role="tab" aria-controls="transcript" aria-selected="false">Transcript (EN)</button>
        </li>
      {{ end }}
      {{ $resources := .Resources.Match "captions.*.md" }}
      {{ range $resources }}
        {{ $langCode := replace .File.BaseFileName "captions." "" }}
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="transcript-tab" data-bs-toggle="tab" data-bs-target="#{{ .Name }}" type="button" role="tab" aria-controls="transcript" aria-selected="false">Transcript ({{ $langCode }})</button>
        </li>
      {{ end }}
    </ul>

    <div class="tab-content mt-3" id="myTabContent">
      <div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="content-tab">
        {{- .Content }}
      </div>
      {{ with $resource }}
        <div class="tab-pane fade" id="{{ .Name }}" role="tabpanel" aria-labelledby="transcript-tab" lang="en">
          {{- .Content }}
        </div>
      {{ end }}
      {{ range $resources }}
        {{ $langCode := replace .File.BaseFileName "captions." "" }}
        <div class="tab-pane fade" id="{{ .Name }}" role="tabpanel" aria-labelledby="transcript-tab" lang="{{ $langCode }}">
          {{- .Content }}
        </div>
      {{ end }}
    </div>
  </section>

  <section class="container my-5" style="max-width: 700px !important">
    {{- partial "publications/tag-cloud.html" . }}
  </section>
  <section class="container my-5" style="max-width: 900px !important">
    {{- partial "publications/share-bar.html" . }}
  </section>
  <section class="container my-5 p-2" style="max-width: 700px !important">
    {{- partial "publications/comments.html" . }}
  </section>
{{- end }}
{{- define "template" }}
  resources/video.html
{{- end }}