{{ define "main" }}

<section class="one-box">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
        <div class="package-thumbnail">
          {{ range where $.Site.Data.packages "name" .Title }}
          <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
          {{ end }}
        </div>
      </div>
      <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
        <h3>{{- .Title -}}</h3>
        {{ range where $.Site.Data.packages "name" .Title }}
          <p class="one-box-down">{{- .desc -}}</p>
          {{ if not (eq .package_yml_url "#")}}
            <a target="_blank" href="{{- .package_yml_url -}}">
              <button class="detail-btn-large me-3" id="purple-bg-btn"><i class="icon-enter-arrow"></i>View on GitHub</button>
            </a>
          {{end}}
          {{ if not (eq .homepage "") }}
            <a target="_blank" href="{{- .homepage -}}">
                <button class="detail-btn-large" id="standard-detail-btn"><i class="icon-enter-arrow"></i>Visit package home</button>
            </a>
          {{end}}
        {{ end }}
      </div>
    </div>
  </div>
</section>

<!-- Copy to clipboard field -->

<section>
  <div class="container">
    <div class="row">
      <div class="col grid-gray">
        Copy the tea one-liner below into your terminal to install {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
      </div>
    </div>
  </div>
</section>

{{ range where $.Site.Data.packages "name" .Title }}
  {{- partial "clipboard-copy-package-detail.html" .  -}}

{{ end }}



<style>

  .package-thumbnail{
    width: 100%;
    height: 100%;
    background-color: gray;
  }

  a:hover{
    text-decoration: none;
  }

  #purple-bg-btn{
    background-color: #8000FF;
    border: 2px solid #8000FF;
  }

  #standard-detail-btn:hover{
    background-color: #212020 !important;
    box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
  }

</style>

{{ end }}