{{ define "header" }}
<title>/{{ .Board.Name }}/ - catalog</title>
<meta name="description" content="{{ .Board.Summary }}">
<meta property="og:url" content="{{ .Board.Actor.Id }}">
<meta property="og:site_name" content="{{ .Instance.PreferredUsername }}" />

<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Board.Summary }}">

<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ .Board.Summary }}">
<meta name="twitter:card" content="summary_large_image">

<script src="/static/js/posts.js"></script>
{{ end }}

{{ define "content" }}
{{ $board := .Board }}
<hr>
<ul style="margin: 0; padding: 0; display: inline">
  <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
  <li style="display: inline"><a href="#bottom">[Bottom]</a></li>
  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
</ul>    
<hr>

<div style="padding: 10px; text-align: center;">
  {{ range .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 }}        

      {{ if and .Sensitive $board.Actor.Restricted }}
      <div id="hide-{{ .Id }}" style="display: none;">[Hide]</div>              
      <div id="sensitive-{{ .Id }}" style="display: none;"><div style="position: relative; text-align: center;"><img style="float: left; margin-right: 10px; margin-bottom: 10px; max-width: 180px; max-height: 180px;" src="/static/sensitive.png"><div style="width: 170px; position: absolute; margin-top: 75px; padding: 5px; background-color: black; color: white; cursor: default; ">NSFW Content</div></div></div>
      {{ end }}
    <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/">      
      <div id="media-{{ .Id }}" style="width:180px;"></div>
    </a>
      <script>
        media = document.getElementById("media-{{ .Id }}")

        if({{ .Sensitive }} && {{ $board.Actor.Restricted }}){            
            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(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
            var img = document.createElement("img");
            img.style = "max-width: 180px; max-height: 180px;"
            img.setAttribute("id", "img")
            img.setAttribute("main", "1")
            img.setAttribute("src", "{{ (index .Attachment 0).Href }}")
            media.appendChild(img)
        }                                

        if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "audio"){
            var audio = document.createElement("audio")
            audio.controls = 'controls'
            audio.preload    = 'metadata'              
            audio.src      = '{{ (index .Attachment 0).Href }}'
            audio.type     = '{{ (index .Attachment 0).MediaType }}'              
            audio.style = "margin-right: 10px; margin-bottom: 10px; max-width: 180px; max-height: 180px;"
            audio.innerText = 'Audio is not supported.'
            media.appendChild(audio)                            
        }

        if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "video"){
            var video = document.createElement("video")
            video.controls = 'controls'
            video.preload    = 'metadata'                          
            video.muted    = 'muted'              
            video.src      = '{{ (index .Attachment 0).Href }}'
            video.type     = '{{ (index .Attachment 0).MediaType }}'              
            video.style = "margin-right: 10px; margin-bottom: 10px; max-width: 180px; max-height: 180px;"
            video.innerText = 'Video is not supported.'
            media.appendChild(video)                                          
        }
        
        document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor.Id}}", "{{ .Id }}")        
      </script>                        
      {{ end }}
      <a id="{{ .Id }}-link" href="/{{ $board.Name }}/">
      <div>
        {{ $replies := .Replies }}
        {{ if $replies }}
        <span style="display: block;">R: {{ $replies.TotalItems }}{{ if $replies.TotalImgs }}/ A: {{ $replies.TotalImgs }}{{ end }}</span>
        {{ end }}
        {{ if .Name }}
        <span style="display: block; color: #0f0c5d;"><b>{{ .Name }}</b></span>
        {{ end }}

        {{ if .Content }}
        <span style="display: block">{{.Content}}</span>
        {{ end }}
      </div>
      </a>
  </div>
  <script>
    document.getElementById("{{ .Id }}-link").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor.Id}}", "{{ .Id }}")
  </script>
  {{ end }}
</div>
<hr>
<ul style="margin: 0; padding: 0; display: inline">
  <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
  <li style="display: inline"><a id="bottom" href="#top">[Top]</a></li>
  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
</ul>
<hr>    
{{ end }}
{{ define "bottom" }}
{{ end }}

{{ define "script" }}
{{ end }}