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

import moment from "moment"

<div class="log-suggestions">
  <if (state.loaded && state.error == null)>
    <if (state.nexts.length > 0 || state.prevs.length > 0)>
      <if (state.nexts.length > 0)>
        <h2 class="color-primary">Next Logs</h2>
        <div for(s in state.nexts) class="suggestion color-primary">
          <div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.name || `${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">${s.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 (state.prevs.length > 0)>
        <h2 class="color-primary">Previous Logs</h2>
        <div for(s in state.prevs) class="suggestion color-primary">
          <div class="suggestion-header color-primary"><a href=`/logs/${s.log.id}`>${s.log.name || `${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">${s.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>
  </if>
  <else-if(state.error != null)>
    <div class="error color-danger">{state.error}</div>
  </else-if>
  <else>
    <div class="loading color-menu">Loading suggestions...</div>  
  </else>
</div>