import moment from "moment"

<div class=["comment", "mode-" + input.mode.toLowerCase()]>
  <if (input.mode === "Message")>
    <div class="metadata">
      <div class="options color-menu">
        <if-permitted user=input.user author=input.comment.author permission="story.edit">
          <a on-click("emit", "open", "editComment", input.comment) >Edit</a>
        </if-permitted>
        <if-permitted user=input.user author=input.comment.author permission="story.edit">
          <a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
        </if-permitted>
      </div>
      <chapter-meta weak kind="date" value=input.comment.createdDate />
      <chapter-meta weak kind="author" value=input.comment.author />
    </div>
    <div class="content color-blockquote">
      <table class="header">
        <tbody>
          <tr if(input.comment.subject != "")>
            <th>Subject:</th>
            <td>${input.comment.subject}</td>
          </tr>
          <tr>
            <th>From:</th>
            <td>
              <div if(input.comment.character != null) class="tooltip" style="display: inline-block">
                <span>${input.comment.characterName}</span>
                
                <div class="tooltip-content color-highlight-dark">
                  <h1>${input.comment.character.name}</h1>
                  <h2>${input.comment.character.author}</h2>
                  <markdown source=input.comment.character.description />
                </div>
              </div>
              <div else>
                <span class="tooltip color-primary">
                  <span>${input.comment.characterName}</span>

                  <div class="tooltip-content color-highlight-dark color-primary">
                    <h1>(Unknown Character)</h1>
                    <h2>${input.comment.author}</h2>
                  </div>
                </span>
              </div>
            </td>
          </tr>
          <tr if(input.comment.fictionalDate != null)>
            <th>Date:</th>
            <td>
              <date utc value=input.comment.fictionalDate></date>
            </td>
          </tr>
        </tbody>
      </table>
      <markdown class="body" source=input.comment.source />
    </div>
  </if>
  <if(input.mode === "Chat")>
    <div class="content">
      <div class="options color-menu">
        <if-permitted user=input.user author=input.comment.author permission="story.edit">
          <a on-click("emit", "open", "editComment", input.comment) >Edit</a>
        </if-permitted>
        <if-permitted user=input.user author=input.comment.author permission="story.edit">
          <a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
        </if-permitted>
      </div>
      <for (paragraph in state.paragraphs)>
        <div class="message-text color-text">
          <markdown class="body" source=paragraph>
            <if (input.comment.fictionalDate)>
              <span class="decoration color-menu">[</span>
              <date utc class="color-menu" value=input.comment.fictionalDate></date>
              <span class="decoration color-menu">]&nbsp;</span>
            </if>
            <span class="decoration color-menu">&lt;</span>
            <span if(input.comment.character != null) class="tooltip color-primary">
              <span>${input.comment.characterName}</span>
              
              <div class="tooltip-content color-highlight-dark color-primary">
                <h1>${input.comment.character.name}</h1>
                <h2>${input.comment.character.author}</h2>
                <markdown source=input.comment.character.description />
              </div>
            </span>
            <span class="tooltip color-primary" else>
              <span>${input.comment.characterName}</span>

              <div class="tooltip-content color-highlight-dark color-primary">
                <h1>(Unknown Character)</h1>
                <h2>${input.comment.author}</h2>
              </div>
            </span>
            <span class="decoration color-menu">&gt;&nbsp;</span>
          </markdown>
        </div>
      </for>
    </div>
  </if>
  <if(input.mode === "Article")>
    <div class="metadata">
      <div class="options color-menu">
        <if-permitted user=input.user author=input.comment.author permission="story.edit">
          <a on-click("emit", "open", "editComment", input.comment) >Edit</a>
        </if-permitted>
        <if-permitted user=input.user author=input.comment.author permission="story.edit">
          <a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
        </if-permitted>
      </div>
      <chapter-meta kind="title" value=input.comment.subject />
      <chapter-meta kind="name" value=input.comment.characterName character=(input.comment.character) ukAuthor=input.comment.author />
      <chapter-meta utc kind="date" value=input.comment.fictionalDate />
      <chapter-meta weak kind="date" value=input.comment.createdDate />
      <chapter-meta weak kind="author" value=input.comment.author />
    </div>
    <div class="content color-text">
      <markdown class="body" source=input.comment.source />
    </div>
  </if>
</div>