frontend/marko/page/logs-content/components/log-suggestions/index.marko

import moment from "moment"

<div class="log-suggestions">    
  <if (input.log.nextLogs.length > 0 || input.log.prevLogs.length > 0)>
    <if (input.log.nextLogs.length > 0)>
      <h2 class="color-primary">Next Logs</h2>
      <div for(s in input.log.nextLogs) class="suggestion color-primary">
        <div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.title || `${s.log.channelName} - ${moment(s.log.date).format("MMMM D, YYYY")}`}</a></div>
        <div for(paragraph in (s.log.description||"").split("\n").filter(p => p)) class="suggestion-description color-text">${paragraph}</div>
        <div class="suggestion-tags">
          <div if(s.hasEvent) class="suggestion-tag color-tag-event">${input.log.eventName}</div>
          <div if(s.hasChannel) class="suggestion-tag color-tag-location">${s.log.channelName}</div>
          <div for(c in s.characters) class="suggestion-tag color-tag-character">${c.name}</div>
        </div>
      </div>
    </if>
    <if (input.log.prevLogs.length > 0)>
      <h2 class="color-primary">Previous Logs</h2>
      <div for(s in input.log.prevLogs) class="suggestion color-primary">
        <div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.title || `${s.log.channelName} - ${moment(s.log.date).format("MMMM D, YYYY")}`}</a></div>
        <div for(paragraph in (s.log.description||"").split("\n").filter(p => p)) class="suggestion-description color-text">${paragraph}</div>
        <div class="suggestion-tags">
          <div if(s.hasEvent) class="suggestion-tag color-tag-event">${input.log.eventName}</div>
          <div if(s.hasChannel) class="suggestion-tag color-tag-location">${s.log.channelName}</div>
          <div for(c in s.characters) class="suggestion-tag color-tag-character">${c.name}</div>
        </div>
      </div>
    </if>
  </if>
  <else>
    <div class="empty color-menu">(No suggestions)</div>
  </else>
</div>