<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8"></meta>
  <style type="text/css"></style>
  <base target="_top" /><!-- this element is amazing-->

  <% if (opts.theme && opts.theme.toLowerCase() == 'masto-light'){ %>
  <link rel="stylesheet" href="/css/masto-light.css"></link>
  <% } else if (opts.theme && opts.theme.toLowerCase() == 'masto-auto'){ %>
    <link rel="stylesheet" href="/css/masto-auto.css"></link>
  <% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-dark'){ %>
    <link rel="stylesheet" href="/css/misskey-dark.css"></link>
  <% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-light'){ %>
    <link rel="stylesheet" href="/css/misskey-light.css"></link>
  <% } else if (opts.theme && opts.theme.toLowerCase() == 'misskey-auto'){ %>
    <link rel="stylesheet" href="/css/misskey-auto.css"></link>
    <% } else if (opts.theme && opts.theme.toLowerCase() == 'pleroma'){ %>
    <link rel="stylesheet" href="/css/pleroma.css"></link>
  <% } else { %>
	<link rel="stylesheet" href="/css/masto-dark.css"></link>
  <% } %>

  <% if (opts.size){ %>
  <style type="text/css">
    html,body{
      font-size: <%= opts.size.toString().slice(0,4) %>%;
    }
  </style>
  <% } %>
  </head>
  <body>
    <% if (opts.header !== false){ %>
      <div class="meta">

        <div class="header" style="<%= meta.headerImage?`background-image:url(${meta.headerImage})`:'' %>">
          <a class="header-left" target="_top" href="<%= meta.link %>">
            <% if (meta.avatar){ %>
              <img class="avatar circular" src="<%= meta.avatar %>"></img>
            <% } %>
          </a>
          <div class="description header-right">
            <a class="header-title" target="_top" href="<%= meta.link %>">
              <%= meta.title %>
            </a>
            <br><br>
            <%- meta.description %>
          </div>
        </div>
      </div>
    <% } %>

    <div class="container">

      <% let filtered = items.filter(function(item){return !((item.isBoost && !opts.boosts) || (item.isReply && !opts.replies))  })%>
      <% filtered.forEach(function(item){ %>
          <div class="item">
            <% if (item.isBoost) { %>
              <div class="item-title"> <%- item.title %> </div>
            <% } %>
      		  <div class="author">
      		    <a target="_top" class="avatar" href="<%- item.author.uri %>">
    			      <img class="avatar" src="<%- item.author.avatar %>"/>
        			</a>
      			  <div class="author-info">
      				  <a target="_top" class="author-displayname" href="<%- item.author.uri %>"> <%= item.author.displayName %> </a>
      				  <div class="author-fullname"> <%= item.author.fullName %> </div>
      			  </div>
      		  </div>
            <% if (item.hasCw){ %>
              <% let cwId = (item.cw+item.atomHref).replace(/\W+/g,'') %>
              <span class="cw"><%- item.cw %></span>
              <input type="checkbox" class="showmore" id="<%- cwId %>">
              <label class="button" for="<%- cwId %>">Show</label>
            <% } %>
            
            <div class="item-content">
              <%- item.content %>
            </div>

            <% if (item.enclosures.length > 0){ %>
              <div class="enclosures">
                <% for (let i = 0; i < item.enclosures.length; i ++){ %>
                  <% let e = item.enclosures[i] %>
                  <% if (e.type.indexOf('audio') > -1) {%>
                    <audio class="enclosure" controls loop src="<%= e.url %>"/>
                  <% }else if (e.type.indexOf('video') > -1){ %>
                    <video class="enclosure" controls loop src="<%= e.url %>"/>
                  <% } else { %>
                    <a target="_top" class="enclosure" href="<%= e.url %>" >
                      <% if (e.type.indexOf('image') > -1){ %>
                        <img src="<%= e.url %>" alt="<%= e.name %>" title="<%= e.name %>"/>
                      <% } else { %>
                        <%= e.url %>
                      <% } %>
                    </a>
                  <% } %>
                <% } %>
              </div>
           <% } %>
          <a class="date" href="<%= item.permalink %>"><%= item.stringDate %></a>
        </div>
      <% }); %>
      <% if (nextPageLink){ %>
      <div class="item hidden">
        <a class="hacky_link" href="<%- nextPageLink %>">More</a>
      </div>
      <% } %>
    </div> <!-- end item container -->
    <% if (nextPageLink){ %>
    <div class="pagination">
      <a class="button" href="<%- nextPageLink %>">Load More</a>
    </div>
    <% } %>

    <% if ( isIndex ){ %>
      <script src="/lib/infinite-scroll.pkgd.min.js"></script>
      <script type="text/javascript">

        let lastPageLoaded = null;
        let infScroll = new InfiniteScroll( '.container', {
          // options
          hideNav:'.pagination',
          append: '.item',
          history:false,
          prefill:true,
          path: function(){
            // need to query this DOM my damn self
            let pageLinks = document.querySelectorAll('.hacky_link');
            if (!pageLinks || pageLinks.length == 0){
              console.log ('next page link could not be found');
              return false;
            }else{
              let finalLink = pageLinks[pageLinks.length-1].href;
              // make sure we don't load the same page twice
              if (!finalLink || finalLink == window.location.href || finalLink == lastPageLoaded){
                console.log('this was the last page');
                return false;
              }else{
                return finalLink;
              }
            }
          }
        });
      </script>

    <% } %>
  </body>

</html>
