flightlesssomething/templates/benchmarks.tmpl

{{template "header.tmpl" .}}

<div class="d-flex justify-content-between align-items-center">
    <h2>Benchmarks</h2>
    {{if .username}}
    <a class="btn btn-primary" href="/benchmark"><i class="fa-solid fa-plus"></i> New benchmark</a>
    {{end}}
</div>

<form action="/benchmarks" method="GET">
    <div class="input-group rounded">
        <input type="search" name="query" class="form-control rounded" placeholder="Search title or description..." aria-label="Query" aria-describedby="query-addon" value="{{ .query }}" />
        <span class="input-group-text border-0" id="query-addon">
            <button type="submit" class="btn btn-link p-0 m-0"><i class="fas fa-search"></i></button>
        </span>
    </div>
</form>

<p><small>Benchmarks found: {{ .benchmarksTotal }}</small></p>

<div class="list-group mt-1">
    {{- range .benchmarks -}}
        <div class="list-group-item flex-column align-items-start position-relative">
            <a href="/benchmark/{{ .ID }}" class="stretched-link"></a>
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1 text-truncate">{{ .Title }}</h5>
                <small class="text-nowrap">{{ .CreatedAtHumanized }}</small>
            </div>
            <div class="d-flex w-100 justify-content-between">
                <p class="mb-1 text-truncate"><small>{{ .Description }}</small></p>
                <small class="text-nowrap">By <b><a href="/user/{{ .User.ID }}" class="username-link">{{ .User.Username }}</a></b></small>
            </div>
        </div>
    {{- end -}}
</div>

<style>
    .list-group-item {
        position: relative;
    }
    .stretched-link {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    .username-link {
        position: relative;
        z-index: 2;
    }
</style>

<div class="d-flex justify-content-center mt-2">
    <ul class="pagination">
        <li class="page-item {{if le .page 1}}disabled{{end}}">
            <a class="page-link" href="{{if gt .page 1}}/benchmarks?page={{ .prevPage }}&query={{ .query }}{{else}}#{{end}}">Previous</a>
        </li>
        <li class="page-item disabled">
            <a class="page-link" href="/benchmarks?page={{ .page }}&query={{ .query }}">{{ .page }}</a>
        </li>
        <li class="page-item {{if ge .page .totalPages}}disabled{{end}}">
            <a class="page-link" href="{{if lt .page .totalPages}}/benchmarks?page={{ .nextPage }}&query={{ .query }}{{else}}#{{end}}">Next</a>
        </li>
    </ul>
</div>

{{template "footer.tmpl" .}}