<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PyMRF 4</title>
</head>

<body>
  <h1>PyMRF 4 Web UI</h1>
  <style>
    body {
      font: 12px/1.5 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    table {
      border: 1px solid var(--border-primary);
      border-collapse: collapse;
      border-radius: var(--elem-radius);
      border-spacing: 0;
      margin: 1rem 0;
      width: 100%;
      font-family:  monospace;
      font-weight: 400;
    }
    table thead {
      display: table-header-group;
    }
    
    table td, table th {
      background: inherit;
      padding: 0.25rem;
      /* width: 2rem; */
      border:solid 1px #ccc;
      white-space: nowrap;
    }
    table thead td {
      background: #efefef;
    }
    table td.nowrap {
      white-space: nowrap;
    }
    table tr.stopped {
      background-color: #eeeeee;
    }
    table tr:hover {
      background-color: #f8f8f8;
    }
    table td.torrent-name {
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 27em;
      min-width: 4em;
      white-space: nowrap;

    }
    span.num {
      font: "Courier New", monospace
    }
    .announces, .announces td {
      display: none
    }
  </style>

  <script type="module">
    import { createApp } from '/petite-vue.js'
    import { PyMRF } from '/app.js'

    createApp({
      PyMRF
    }).mount()
  </script>

  <div v-scope="PyMRF()" @vue:mounted="mounted">
    <div>
      Overall up speed: {{convertSize(totalUploadSpeed)}}/s
    </div>
    <table v-if="allCtx.length > 0">
      <thead>
        <tr>
          <td></td>
          <td>Name</td>
          <td>Hash</td>
          <td>Site</td>
          <td>Size</td>
          <td>Event/Seeding</td>
          <td>Leechers</td>
          <td>Speeds T(S)</td>
          <td>Session</td>
          <td>Total</td>
          <td>Share ratio</td>
          <td>Last ann.</td>
        </tr>
      </thead>
      <tbody>
        <template v-for="ctx in allCtx">
          <tr :class="{'stopped': ctx.last_event == 'stopped'}" :key="ctx.id">
            <td>
              <select>
                <option value="movie">Movie</option>
                <option value="tvshow">TV Show</option>
              </select>
              <button @click.prevent.stop="">Harvest</button>
            </td>
            <td class="torrent-name" @click.stop.prevent="toggleShowAnnounces(ctx)">{{ctx.name}}</td>
            <td>{{formatInfoHash(ctx.info_hash)}}</td>
            <td>{{ctx.site}}</td>
            <td>{{convertSize(ctx.size)}}</td>
            <td>{{ctx.last_event}} | 
              <span v-if="ctx.is_seeding">✅</span>
              <span v-else>❌</span>
            </td>
            <td><span class="num">{{ctx.leechers}}</span>
              <!-- -> 
              <span v-if="ctx.is_modifying">
                <span v-if="ctx.leechers<8">✅</span>
                <span v-if="ctx.leechers>=8">🍔</span>
              </span>
              <span v-else>❌</span> -->
            <td>{{convertSize(ctx.upload_speed)}}/s</td>
            <td>D: {{convertSize(ctx.session_download)}} | U: {{convertSize(ctx.session_upload)}} -> {{convertSize(ctx.session_upload_actual)}}</td>
            <td>D: {{convertSize(ctx.total_download)}} | U: {{convertSize(ctx.total_upload)}} -> {{convertSize(ctx.total_upload_actual)}}</td>
            <td>{{shareRatio(ctx)}}</td>
            <td>{{timeDifference(ctx.last_announced_at)}}</td>
          </tr>
          <tr v-show="showShowAnnounces(ctx)">
            <td colspan="11">
              <table style="margin: 4px; margin-left: 24px; width: 800px">
                <thead>
                  <tr>
                    <td>Created at</td>
                    <td>Event</td>
                    <td>Upload Speed</td>
                    <td>Upload Actual</td>
                    <td>Ela. Since Last Ann.</td>
                  </tr>
                </thead>
                <tbody>
                  <template v-for="announce in announcesOfCtx[ctx.id]">
                    <tr>
                      <td>{{timeDifference(announce.created_at)}}</td>
                      <td>{{announce.event}}</td>
                      <td>{{convertSize(announce.upload_speed)}}/s</td>
                      <td>{{convertSize(announce.upload_actual)}}</td>
                      <td>{{announce.elapsed_since_last_announce}}</td>
                    </tr>
                  </template>
                </tbody>
              </table>  
            </td>
          </tr>
        </template>
        
      </tbody>
    </table>
  </div>
</body>

</html>