<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>
      {{ .Title }}
    </title>
    {{/* styles */}}
    <style>
      html {
        font-size: 12px;
      }
    </style>

    {{/* Load Bootstrap SCSS. */}}
    {{ $options := dict "enableSourceMap" true }}
    {{ if hugo.IsProduction }}
      {{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }}
    {{ end }}
    {{ $styles := resources.Get "scss/styles.scss" }}
    {{ $styles = $styles | css.Sass $options }}
    {{ if hugo.IsProduction }}
      {{ $styles = $styles | fingerprint }}
    {{ end }}
    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />

    {{/* Load Bootstrap JS. */}}
    {{ $js := resources.Get "js/index.js" }}
    {{ $params := dict }}
    {{ $sourceMap := cond hugo.IsProduction "" "inline" }}
    {{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
    {{ $js = $js | js.Build $opts }}
    {{ if hugo.IsProduction }}
      {{ $js = $js | fingerprint }}
    {{ end }}
    <script
      src="{{ $js.RelPermalink }}"
      {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
      defer></script>
  </head>
  <body>
    <div class="container mt-5 mb-5">
      <h1>Bootstrap v5 Hugo Module</h1>
      <h2 class="mt-4">Dependencies</h2>
      <p class="mt-4">
        <strong>Note:</strong> We have a replacement of
        github.com/gohugoio/hugo-mod-bootstrap-scss/v4 to point to the directory
        one level up (we do this to get correct PR previews when we update
        Bootstrap). The version number reflects the version in
        <code>go.mod</code>.
      </p>
      <table class="table table-striped table-responsive mt-2">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Owner</th>
            <th scope="col">Path</th>
            <th scope="col">Version</th>
            <th scope="col">Time</th>
            <th scope="col">Vendor</th>
          </tr>
        </thead>
        <tbody>
          {{ range $index, $element := hugo.Deps }}
            <tr>
              <th scope="row">{{ add $index 1 }}</th>
              <td>{{ with $element.Owner }}{{ .Path }}{{ end }}</td>
              <td>
                {{ $element.Path }}
                {{ with $element.Replace }}
                  =>
                  {{ .Path }}
                {{ end }}
              </td>
              <td>{{ $element.Version }}</td>
              <td>{{ with $element.Time }}{{ . }}{{ end }}</td>
              <td>{{ $element.Vendor }}</td>
            </tr>
          {{ end }}
        </tbody>
      </table>
      <h2 class="my-4">Toast (JS plugin)</h2>
      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"></button>
        </div>
        <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>
      <h2 class="my-4">Popover (JS plugin)</h2>
      <button
        type="button"
        class="btn btn-lg btn-danger"
        data-bs-toggle="popover"
        title="Popover title"
        data-bs-content="And here's some amazing content. It's very engaging. Right?">
        Click to toggle popover
      </button>
      <h2 class="my-4">Buttons</h2>
      <div class="d-grid gap-2 d-md-block">
        <button
          type="button"
          class="btn btn-primary"
          data-bs-toggle="button"
          autocomplete="off">
          Toggle button
        </button>
        <button
          type="button"
          class="btn btn-primary active"
          data-bs-toggle="button"
          autocomplete="off"
          aria-pressed="true">
          Active toggle button
        </button>
        <button
          type="button"
          class="btn btn-primary"
          disabled
          data-bs-toggle="button"
          autocomplete="off">
          Disabled toggle button
        </button>
      </div>
      <h2 class="my-4">Carousel</h2>
      <div
        id="carouselExampleControls"
        class="carousel slide"
        data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "First slide") }}
          </div>
          <div class="carousel-item">
            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "Second slide") }}
          </div>
          <div class="carousel-item">
            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "Third slide") }}
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleControls"
          data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleControls"
          data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </body>
</html>
