{{define "title"}}Blog{{end}}

{{define "scripts"}}
<script src="/static/js/pltags.js"></script>
<script src="/static/js/tag_filter.js"></script>
{{end}}

{{define "main"}}
<div class="container is-fullhd">
  <p class="title is-1">Blog</p>
  <p class="subtitle is-3">My personal blog, infrequently updated.</p>
  {{if .IsAuthenticated}}
  <div class="level mb-3 ml-3 is-mobile">
    <div class="level-left">
      <div class="level-item">
        <a class="button is-info is-soft" href="/blog/new">
          <i class="pr-1" data-feather="plus-square"></i>Add New Post</a>
      </div>
      <div class="level-item">
        <a class="button is-info is-soft" href="/blog/drafts">
          <i class="pr-1" data-feather="file-text"></i>Drafts</a>
      </div>
      <div class="level-item">
        <a class="button is-info is-soft" href="/upload">
          <i class="pr-1" data-feather="folder-plus"></i>Upload Files</a>
      </div>
    </div>
  </div>
  {{end}}
  <div class="field has-addons">
    <div class="control">
      <div class="select mb-3">
        <select name="tagFilter" id="tagFilter">
          <option value="" {{if eq .Filter "" }}selected{{end}}>Filter by tag</option>
          {{$filter := .Filter}}
          {{range .Tags}}
          {{$uri := pathEscape .Name}}
          <option value="{{$uri}}" {{if eq .Name $filter}}selected{{end}}>
            <span class="tag {{.Color}} post-tag">{{.Name}}</span>
          </option>
          {{end}}
        </select>
      </div>
    </div>
    <div class="control">
      <a href="/blog" class="button is-info" id="filterLink">Filter</a>
    </div>
  </div>
  {{template "postlist" .}}
</div>
{{end}}