{% extends 'base.html' %} {% block content %}
  <div class="container">
    <h2>Request</h2>
    <form id="rip-form">
      <div class="mb-3">
        <input
          type="text"
          name="url"
          id="urlInput"
          placeholder="https://music.youtube.com/..."
          class="form-control"
          required
        />
      </div>
  
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="is-channel-check" name="is-channel-check">
        <label class="form-check-label" for="is-channel-check">Is Channel</label>
      </div>
  
      <button type="submit" class="btn btn-primary">Queue</button>
    </form>
  </div>
  
  </br>
  
  <div class="container">
    <h2>Current</h2>
    <div id="status-message"></div>
  </div>
  
  </br>
  
  <div class="container">
    <h2>Queue</h2>
    <table class="table" id="queue-table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">URL</th>
        </tr>
      </thead>
      <tbody id="queue-table-body"></tbody>
    </table>
  </div>
  
  </br>
  
  <div class="container">
    <h2>Finished</h2>
    <div id=finish-table-body></div>
  </div>
  
  <script>
    function createCard(artist, title, status, art) {
      return `
        <div class="card mb-3" style="max-width: 540px;">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="${art}" class="img-fluid rounded-start">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${artist}</p>
                <p class="card-text"><small class="text-body-secondary">${status}</small></p>
              </div>
            </div>
          </div>
        </div>
      `;
    }
  
    function createFinishCard(artist, title, status, art, destinations) {
      let dstList = ""
      for (destination of destinations) {
        dstList += `<li>${destination}</li>`;
      }
  
      let extraClasses = ""
      if (status !== "Finished sucessfully") {
        extraClasses = "border-danger"
      }
  
      return `
        <div class="card mb-3 ${extraClasses}" style="max-width: 540px;">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="${art}" class="img-fluid rounded-start">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${artist}</p>
  
                <ol>
                  ${dstList}
                </ol>
  
                <p class="card-text"><small class="text-body-secondary">${status}</small></p>
              </div>
            </div>
          </div>
        </div>
      `;
    }
  
    const ripFormInput = document.getElementById("urlInput");
  
    document
      .getElementById("rip-form")
      .addEventListener("submit", async function (e) {
        e.preventDefault();
  
        const formData = new FormData(this);
  
        const response = await fetch("/rip", {
          method: "POST",
          body: formData,
        });
  
        const data = await response.json();
        ripFormInput.value = "";
      });
  
    const queueTableBody = document.getElementById("queue-table-body");
    const finishTableBody = document.getElementById("finish-table-body");
    const statusMessage = document.getElementById("status-message");
    const statusMessageImage = document.getElementById("status-message-img");
  
    async function status() {
      const response = await fetch("/status", { method: "GET" });
      const statusJson = await response.json();
  
      if ("currentReleaseInfo" in statusJson) {
        const currentInfo = statusJson.currentReleaseInfo;
        statusMessage.innerHTML = createCard(currentInfo.artist, currentInfo.title, statusJson.status, currentInfo.art_url);
      }
      else {
        statusMessage.innerHTML = `<p>${statusJson.status}</p>`;
      }
  
      queueTableBody.innerHTML = "";
  
      var i = 1;
      for (const url of statusJson.queue) {
        queueTableBody.innerHTML += `<tr><td>${i}</td><td>${url}</td></tr>`;
        i ++;
      }
  
      finishTableBody.innerHTML = "";
      for (const q of statusJson.finishedQueue.toReversed()) {
        finishTableBody.innerHTML += createFinishCard(q.artist, q.title, q.status, q.art_url, q.destinations);
      }
    }
  
    setInterval(status, 100);
  </script>
{% endblock %}