{{ define "posts" }}
{{ $board := .Board }}
{{ $len := len .Posts }}
{{ range .Posts }}
{{ $opId := .Id }}
{{ if eq $board.InReplyTo "" }}
<hr>
{{ end }}
<div style="overflow: auto;">
  <div id="{{ .Id }}" style="overflow: visible; margin-bottom: 12px;">
    {{ 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 }}                
    <span style="display: block;">File: <a id="{{ .Id }}-img" href="{{ (index .Attachment 0).Href}}">{{ (index .Attachment 0).Name  }}</a><span id="{{ .Id }}-size">({{ (index .Attachment 0).Size  }})</span></span>
    <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: 250px; max-height: 250px;" src="/static/sensitive.png"><div id="sensitive-text-{{ .Id }}" style="width: 240px; position: absolute; margin-top: 110px; padding: 5px; background-color: black; color: white; cursor: default; ">NSFW Content</div></div></div>    
    <div id="media-{{ .Id }}"></div>
    <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;"          
      }
      
      if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
          var img = document.createElement("img");
          img.style = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px;"
          img.setAttribute("id", "img")
          img.setAttribute("main", "1")
          img.setAttribute("enlarge", "0")
          img.setAttribute("attachment", "{{ (index .Attachment 0).Href }}")
          {{ if .Preview.Href }} 
          img.setAttribute("src", "{{  .Preview.Href }}")
          img.setAttribute("preview", "{{ .Preview.Href }}")          
          {{ else }}
          img.setAttribute("src", "{{  (index .Attachment 0).Href }}")
          img.setAttribute("preview", "{{ (index .Attachment 0).Href }}")                    
          {{ end }}
          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 = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px;"
          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 = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px;"
          video.innerText = 'Video is not supported.'
          media.appendChild(video)                                          
      }                    
    </script>
    {{ end }}
    <span style="color: #0f0c5d;"><b>{{ .Name }}</b></span><span style="color: #117743;"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span class="tripcode"> {{ .TripCode }} </span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/">No.</a> <a id="{{ .Id }}-link" title="{{ .Id }}" href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')">{{ .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">[Report]</a>{{ end }}</span>
    <p id="{{ .Id }}-content" style="white-space: pre-wrap; margin: 10px 30px 10px 30px;">{{.Content}}</p>
    {{ if .Replies }}
    {{ $replies := .Replies }}
    {{ if gt $replies.TotalItems 5 }}
    {{ if gt $len 1 }}
    <span>{{ $replies.TotalItems }} replies{{ if gt $replies.TotalImgs 0}} and {{ $replies.TotalImgs }} images{{ end }}, Click <a id="view" post="{{.Id}}" href="/{{ $board.Name }}/{{ .Id }}">here</a> to view all.</span>
    {{ end }}
    {{ end }}
    {{ range $replies.OrderedItems }}
    <div id="{{ .Id }}">
      <div  style="display: inline-block; overflow: auto;">
        <div style="float: left; display: block; margin-right: 5px;">>></div>
        <div class="post" style="overflow: auto; padding: 5px; margin-bottom: 2px;">
          {{ 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 }}
          <span style="display: block;">File <a id="{{ .Id }}-img" href="{{ (index .Attachment 0).Href}}">{{ (index .Attachment 0).Name  }}</a> <span id="{{ .Id }}-size">({{ (index .Attachment 0).Size  }})</span></span>
          <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: 250px; max-height: 250px;" src="/static/sensitive.png"><div id="sensitive-text-{{ .Id }}" style="width: 240px; position: absolute; margin-top: 110px; padding: 5px; background-color: black; color: white; cursor: default; ">NSFW Content</div></div></div>              
          <div> </div>
          <div id="media-{{ .Id }}" sensitive="0"></div>
          <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;"          
            }            
            
            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
                var img = document.createElement("img");
                img.style = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px;"
                img.setAttribute("id", "img")
                img.setAttribute("main", "1")
                img.setAttribute("enlarge", "0")
                img.setAttribute("attachment", "{{ (index .Attachment 0).Href }}")
                img.setAttribute("post", "{{ .Id }}")
                {{ if and .Preview.Href . }}
                img.setAttribute("src", "{{  .Preview.Href }}")
                img.setAttribute("preview", "{{ .Preview.Href }}")
                {{ else }}
                img.setAttribute("src", "{{  (index .Attachment 0).Href }}")
                img.setAttribute("preview", "{{ (index .Attachment 0).Href }}")                    
                {{ end }}                
                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 = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px;"
                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 = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px;"
                video.innerText = 'Video is not supported.'
                media.appendChild(video)                                                        
            }                    
          </script>              
          {{ end }}
          <span style="color: #0f0c5d;"><b>{{ .Name }}</b></span><span style="color: #117743;"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span class="tripcode"> {{ .TripCode }} </span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/post/{{ $opId }}#{{ .Id }}">No. </a><a id="{{ .Id }}-link" title="{{ .Id }}" href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')">{{ .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">[Report]</a>{{ end }}</span>
          {{ $parentId := .Id }}
          {{ if .Replies.OrderedItems }}
          {{ range .Replies.OrderedItems }}
          <span id="{{$parentId}}-replyto-{{.Id}}"></span>
          <script>
            var content = convertContentNoLink('{{$board.Actor.Id}}', '{{ .Content }}', '{{ $opId }}')                    
            document.getElementById("{{ $parentId }}-replyto-{{.Id}}").innerHTML = "<a title='" + content  +"' href='/{{ $board.Name }}/" + shortURL("{{ $board.Actor.Id }}", "{{ $opId }}") + "#" + shortURL("{{ $board.Actor.Id }}", "{{ .Id }}") + "'>>>" + shortURL("{{ $board.Actor.Id }}", "{{ .Id }}") + "</a>";
          </script>
          {{ end }}
          {{ end }}
          <p id="{{ .Id }}-content" style="white-space: pre-wrap; margin: 10px 30px 10px 30px;">{{.Content}}</p>
        </div>
      </div>
    </div>
    <script>
      {{ if .Attachment }}
      document.getElementById("{{ .Id }}-size").innerText = " (" + convertSize({{ (index .Attachment 0).Size }}) + ")";
      document.getElementById("{{ .Id }}-img").innerText = shortImg("{{ (index .Attachment 0).Name }}");
      {{ end }}

      document.getElementById("{{ .Id }}-link").innerText = shortURL("{{ $board.Actor.Id }}", "{{ .Id }}");

      document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor.Id}}", "{{ $opId }}") +
    "#" + shortURL("{{$board.Actor.Id}}", "{{ .Id }}");                
      document.getElementById("{{ .Id }}").setAttribute("id", shortURL("{{$board.Actor.Id}}", "{{ .Id }}"));

      var content = document.getElementById("{{ .Id }}-content");

      content.innerHTML = convertContent('{{$board.Actor.Id}}', content.innerText, '{{ $opId }}')        

    </script>      
    {{ end }}
    {{ end }}
  </div>
</div>
<script>
  {{ if .Attachment }}      
  document.getElementById("{{ .Id }}-size").innerText = " (" + convertSize({{ (index .Attachment 0).Size }}) + ")";
  document.getElementById("{{ .Id }}-img").innerText = shortImg("{{ (index .Attachment 0).Name }}");
  {{ end }}

  document.getElementById("{{ .Id }}-link").innerText = shortURL("{{ $board.Actor.Id }}", "{{ .Id }}");

  document.getElementById("{{ .Id }}").setAttribute("id", shortURL("{{ $board.Actor.Id }}", "{{ .Id }}"));

  document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor.Id}}", "{{ $opId }}") +
    "#" + shortURL("{{$board.Actor.Id}}", "{{ .Id }}");

  var content = document.getElementById("{{ .Id }}-content");

  content.innerHTML = convertContent('{{$board.Actor.Id}}', content.innerText, '{{ $opId }}')              
</script>
{{ end }}
{{ end }}