<script>
  import { time_from_ts } from "$lib/util.js";
  import { _, locale } from "$lib/locale.js";

  let { service } = $props();
</script>

<main>
  <div class="info">
    <div>
      <h1>{service.name}</h1>
      <p>{service.desc[$locale.code]}</p>
    </div>
    <ul>
      <li><a href={service.clear}> Clear</a></li>
      <span>|</span>
      <li><a href={service.onion}>TOR</a></li>
      <span>|</span>
      <li><a href={service.i2p}> I2P</a></li>
    </ul>
  </div>
  <div class="check">
    <p>
      {$_("services.last", {
        time: time_from_ts(service.check_time),
      })}
    </p>
    {#if service.check_res == 0}
      <span style="background: var(--white-2)">
        {$_("services.status.down")}
      </span>
    {:else if service.check_res == 1}
      <span style="background: var(--color)">
        {$_("services.status.up")}
      </span>
    {:else if service.check_res == 2}
      <span style="background: var(--color); filter: brightness(50%);">
        {$_("services.status.slow")}
      </span>
    {/if}
  </div>
</main>

<style>
  main {
    display: flex;
    flex-direction: column;

    background: var(--black-2);
    border: solid 1px var(--black-3);
    text-align: left;

    flex: 1;
  }

  main .info {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    flex: 1;

    color: var(--white-1);
    padding: 15px 18px;
  }

  main .info div h1 {
    font-size: var(--size-4);
    font-weight: 900;
  }

  main .info div p {
    font-size: var(--size-2);
    color: var(--white-2);
    font-weight: 100;
  }

  main .info ul {
    display: flex;
    flex-direction: row;
    gap: 5px;

    text-align: right;
    list-style: none;
  }

  main .info li a {
    color: var(--color);
    text-decoration: none;

    font-size: var(--size-2);
    font-weight: 100;
  }

  main .info li a:hover {
    text-decoration: underline;
  }

  main .info li a[href=""] {
    color: var(--white-3);
    cursor: not-allowed;
  }

  main .info li a[href=""]:hover {
    text-decoration: none;
    text-shadow: none;
  }

  main .info ul span {
    color: var(--white-3);
  }

  main .check {
    border-top: solid 1px var(--black-3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--white-1);
  }

  main .check p {
    font-size: var(--size-2);
    font-weight: 100;

    color: var(--white-2);
    padding: 5px 18px;

    word-break: keep-all;
    white-space: nowrap;
  }

  main .check span {
    font-size: var(--size-4);
    font-weight: 1000;

    color: var(--black-1);
    padding: 5px 18px;
    text-transform: uppercase;
  }
</style>
