<!doctype html>
<html lang="en">
  <head>
    {{ partial "header" . }}
  </head>
  <body id="icons-body">
    {{ partial "skippy" . }}
    {{ partial "navbar" . }}

    <main class="container" id="content" role="main">
      <nav>
        <ul class="breadcrumb my-4 text-muted bg-transparent p-0">
          <li class="breadcrumb-item"><a href="/">Icons</a></li>
          <li class="breadcrumb-item">{{ .Title }}</li>
        </ul>
      </nav>

      <div class="row align-items-md-center">
        <div class="col-md-6 col-lg-7">
          <h1>{{ .Title }}</h1>
          <p class="mb-3 mb-md-0">Tags: {{ with .Params.tags }}{{ delimit . ", " }}{{ end }}</p>
        </div>
        <div class="col-md-6 col-lg-5">
          <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>
        </div>
      </div>

      <hr class="my-4">

      {{- $filenameWithExt := split .Name "." -}}
      {{- $filename := index $filenameWithExt 0 -}}
      {{- $name := humanize $filename -}}

      <div class="row mb-4">
        <div class="col-lg-6">
          <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 20em;">
            {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
          </div>
        </div>
        <div class="col-lg-3">
          <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 10em">
            {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
          </div>
        </div>
        <div class="col-lg-2">
          <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 2em">
            {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
          </div>
        </div>
        <div class="col-lg-1">
          <div class="d-flex align-items-center justify-content-center p-2 p-md-3 py-lg-4 mb-2 bg-light rounded" style="font-size: 1em">
            {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
          </div>
        </div>
      </div>

      <h2>Copy HTML</h2>

      <div id="copy-error-callout" class="alert alert-info d-none" role="alert"></div>

      {{ $source := readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) -}}
      {{ highlight $source "html" "" }}

    </main>

    {{- partial "footer" . }}

    <script src="/assets/js/clipboard.min.js"></script>
    <script>
      var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>';

      [].slice.call(document.querySelectorAll('figure.highlight, div.highlight'))
        .forEach(function (element) {
          element.insertAdjacentHTML('beforebegin', btnHtml)
        });

      var clipboard = new ClipboardJS('.btn-clipboard', {
        target: function (trigger) {
          return trigger.parentNode.nextElementSibling
        }
      })

      clipboard.on('success', function (e) {
        e.clearSelection()
        e.trigger.textContent = 'Copied!'
        setTimeout(function () {
          e.trigger.textContent = 'Copy'
        }, 2000);
      })

      clipboard.on('error', function () {
        var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
        var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
        var errorElement = document.getElementById('copy-error-callout')

        if (!errorElement) return

        errorElement.classList.remove('d-none')
        errorElement.insertAdjacentHTML('afterbegin', fallbackMsg)
      })
    </script>
  </body>
</html>
