{{ template "partials/top" .page }}

{{ $board := .page.Board }}
<hr>

<ul id="navlinks">
  <li>[<a href="/{{ .page.Board.Name }}">Return</a>]</li>
  {{ template "partials/post_nav" .page }}
  <li>[<a href="#bottom" id="top">Bottom</a>]</li>
</ul>

<hr>

<div style="padding: 10px; text-align: center;">
  {{ range .page.Posts }}
  <div style="overflow: hidden; vertical-align: top; padding-right: 24px; padding-bottom: 24px; display: inline-block; width: 180px; max-height: 320px; margin-bottom: 10px;">
    {{ if eq $board.ModCred $board.Domain $board.Actor.Id }}
    [<a href="/delete?id={{ .Id }}&board={{ $board.Actor.Name }}">Delete Post</a>]
    {{ end }}
    {{ if .Attachment }}
    {{ if eq $board.ModCred $board.Domain $board.Actor.Id }}
    [<a href="/deleteattach?id={{ .Id }}&board={{ $board.Actor.Name }}">Delete Attachment</a>]
    [<a href="/marksensitive?id={{ .Id }}&board={{ $board.Actor.Name }}">Mark Sensitive</a>]
    {{ end }}
    <div id="hide-{{ .Id }}" style="display: none;">[Hide]</div>
    <div id="sensitive-{{ .Id }}" style="display: none;">
      <div style="position: relative; text-align: center;">
        <img id="sensitive-img-{{ .Id }}" style="float: left; margin-right: 10px; margin-bottom: 10px; max-width: 180px; max-height: 180px;" src="/static/sensitive.png">
        <div id="sensitive-text-{{ .Id }}" style="width: 170px; position: absolute; margin-top: 75px; padding: 5px; background-color: black; color: white; cursor: default; ">NSFW Content</div>
      </div>
    </div>
    <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ shortURL $board.Actor.Outbox .Id}}">
      <div id="media-{{ .Id }}" style="width:180px;"><div id="status" style="position: absolute;">{{ if .Sticky }}<span id="sticky"><img src="/static/pin.png"></span>{{ end }}{{ if .Locked }}<span id="lock"><img src="/static/locked.png"></span>{{ end }}</div>{{ parseAttachment . true }}</div>
    </a>
    <script>
      media = document.getElementById("media-{{ .Id }}")

      if(({{ .Sensitive }} && {{ $board.Actor.Restricted }}) || ({{ isOnion .Id }} && !{{ isOnion $board.Domain }})){
          sensitive = document.getElementById("sensitive-{{ .Id }}")
          hide = document.getElementById("hide-{{ .Id }}")
          sensitive.onclick = function(){document.getElementById("media-{{ .Id }}").style="display: block;"; document.getElementById("sensitive-{{ .Id }}").style="display: none;"; document.getElementById("hide-{{ .Id }}").style="display: block; cursor: pointer;"}
          hide.onclick = function(){document.getElementById("media-{{ .Id }}").style="display: none;"; document.getElementById("sensitive-{{ .Id }}").style="display: block;"; document.getElementById("hide-{{ .Id }}").style="display: none;"}
          sensitive.style = "display: block"
          media.style = "display: none;"
      }

      if({{ isOnion .Id }} && !{{ isOnion $board.Domain }}) {
          sensitive = document.getElementById("sensitive-{{ .Id }}")
          document.getElementById("sensitive-img-{{ .Id }}").src = "/static/onion.png"
          document.getElementById("sensitive-text-{{ .Id }}").innerText = "Tor Instance"
          hide = document.getElementById("hide-{{ .Id }}")
          sensitive.onclick = function(){document.getElementById("media-{{ .Id }}").style="display: block;"; document.getElementById("sensitive-{{ .Id }}").style="display: none;"; document.getElementById("hide-{{ .Id }}").style="display: block; cursor: pointer;"}
          hide.onclick = function(){document.getElementById("media-{{ .Id }}").style="display: none;"; document.getElementById("sensitive-{{ .Id }}").style="display: block;"; document.getElementById("hide-{{ .Id }}").style="display: none;"}
          sensitive.style = "display: block"
          media.style = "display: none;"
      }
    </script>
    {{ end }}
    <a style="color: unset;" id="{{ .Id }}-link" href="/{{ $board.Name }}/{{ shortURL $board.Actor.Outbox .Id }}">
      <div style="display: block;">
        {{ $replies := .Replies }}
        {{ if $replies }}
        <span>R: {{ $replies.TotalItems }}{{ if $replies.TotalImgs }}/ A: {{ $replies.TotalImgs }}{{ end }}</span>
        {{ end }}
        {{ if .Name }}
        <br>
        <span class="subject"><b>{{ .Name }}</b></span>
        {{ end }}

        {{ if .Content }}
        <br>
        <span>{{.Content}}</span>
        {{ end }}
      </div>
    </a>
  </div>
  {{ end }}
</div>

<hr>

<ul id="navlinks">
  <li>[<a href="/{{ .page.Board.Name }}">Return</a>]</li>
  {{ template "partials/post_nav" .page }}
  <li>[<a href="#top" id="bottom">Top</a>]</li>
</ul>

<hr>

{{ template "partials/footer" .page }}
{{ template "partials/general_scripts" .page }}