<script lang="ts">
  import { creatorColor, formatTime } from '../lib/util';
  import type Comment from '../models/Thread';
  export let comment: Comment;
</script>


<div class="commentbox" id="{comment.id}">

  <span style="line-height: 2rem;">
    <span style="font-family: mono">{comment.id}</span>
    at {formatTime(comment.creationDate)} <br>
    ->  <span style="{creatorColor(comment.commentCreator)}; font-family: mono">
      {comment.commentCreator}
    </span> <br>
  </span>

  {#if comment.imageId!= null && comment.imageId != undefined}
    {#if comment.fileType == 'image'}
      <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer">
        <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br>
      </a>
    {:else if comment.fileType == 'video'}
      <video width="320" height="240" controls muted>
        <source src="{comment.imageId}">
      </video>
    {/if}
  {/if}

<p>{@html comment.commentText}</p>

</div>

<style>
  .commentbox {
    width: 500px;
    border: 5px solid green;
    padding: 10px;
    margin: 10px;
    background-color: white;
  }
  :target, .targeted {
    background-color: #ffa;
  }
</style>
