<!doctype html>
<html lang="en" class="h-100">
  <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>YTDL Web</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css"
      integrity="sha256-R91pD48xW+oHbpJYGn5xR0Q7tMhH4xOrWn1QqMRINtA="
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
      crossorigin="anonymous"
      defer
    ></script>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"
      defer
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.js"
      integrity="sha256-Hgwq1OBpJ276HUP9H3VJkSv9ZCGRGQN+JldPJ8pNcUM="
      crossorigin="anonymous"
      defer
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/htmx.org@1.9.4/dist/htmx.min.js"
      integrity="sha256-XIivRAE99i/eil5P31JNihaDSiix0V40rgmUrCfNTH4="
      crossorigin="anonymous"
    ></script>
    <style>
      #toast-container > div {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        -ms-filter: none;
        filter: none;
        opacity: 1;
      }

      .downloads {
        display: grid;
        grid-template-columns: minmax(auto, max-content) auto;
        gap: 1.5rem;
        align-items: center;
      }

      .see-more-btn,
      .collapse {
        grid-column: span 2;
      }
    </style>
  </head>

  <body class="d-flex flex-column h-100" data-bs-theme="dark">
    <div class="flex-shrink-0">
      {{template "partials/navbar" .}}
      <main id="main-content" class="container my-5">{{yield}}</main>
    </div>
    {{template "partials/footer" .}}
    <script>
      /**
       * @param content {Element}
       */
      function setupPaste(content) {
        const pasteButton = content.querySelector("#paste-button");
        const urlField = content.querySelector("#url");

        if (pasteButton) {
          pasteButton.addEventListener("click", async () => {
            try {
              const text = await navigator.clipboard.readText();
              urlField.value = text;
            } catch (error) {
              toastr.error("Failed to paste url from clipboard.");
            }
          });
        }
      }

      htmx.onLoad(setupPaste);
    </script>
  </body>
</html>
