{{define "content"}}
<div class="discover">
<h2>Discover repos.</h2>
{{range .Repos}}
    <div class="repo">
        <a href="/~{{.User.Handle}}/{{.Name}}"><h3>~{{.User.Handle}}/{{.Name}}</h3></a>
        <span>-</span>
        {{if .Description}}
            <p>{{.Description}}</p>
        {{else}}
            <i>Undescribed.</i>
        {{end}}
    </div>
{{else}}
    <i>No repos have been created yet.</i>
{{end}}
</div>

<style>
    .discover h2 {
        margin-block: var(--gap);
    }
    
    .discover .repo {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        
        * {
            margin: 0;
        }
    }
</style>

{{end}}