{{ define "header" }}
<h1 class="large-title">Projects</h1>
<div id="search-bar" style="display: none;">
    <input id="search-box" type="text" name="search" placeholder="Search Projects" autocomplete="off" autofocus />
    <svg id="search-icon" viewBox="0 0 24 24" aria-hidden="true" class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
</div>
<script>document.getElementById("search-bar").style.display="flex"</script>
{{ end }}

{{ define "content" }}
<!-- Container for results text -->
<div id="results" class="container hide">Found <span class="count"></span> results for <span class="query"></span></div>

<div class="container all-projects">
    {{ range sort $.Site.Data.projects "pushedAt" "desc" -}}
    <div class="project-card" id="{{ .nameWithOwner }}">
        <h1 class="project-name small-margin">{{ .name }}</h1>
        <div class="border small-margin"{{ with .primaryLanguage }} style="border-bottom-color:{{ .color }}"{{ end }}></div>
        <div class="project-description xsmall-margin">{{ .descriptionHTML | safeHTML }}</div>
        <p class="project-language">{{ with .primaryLanguage }}{{ .name }}{{ end }}</p>
        <div class="whitespace"></div>
        <div class="project-links">
            <a href="https://github.com/{{ .nameWithOwner }}" target="_blank" rel="noopener">GitHub</a>
            {{ with .homepageUrl }}<a href="{{ . }}" target="_blank" rel="noopener">Website</a>{{ end }}
        </div>
        <a href="https://twitter.github.io/metrics/{{ .nameWithOwner }}/WEEKLY" class="Button Button--secondary">Metrics</a>
    </div>
    {{ end }}
</div>
{{ end }}