{% extends "base.html" %} {% block main %}
<div class="flex justify-center h-[calc(100vh-52px)] items-start pt-16">
  <div class="grow">
    <div class="text-center pb-4">
      <div id=""></div>
      <p class="font-adlam text-[40px]">
        <span id="typewriter" class="text-primary"></span>
        <span class="block sm:inline">Downloader</span>
      </p>
      <div class="pt-2 pb-4">
        <p>Download Videos from Social Media in easy</p>
        <p>way</p>
      </div>
    </div>
    <form id="download">
      <div class="flex justify-center flex-col items-center">
        <div class="flex justify-center w-4/5 flex-wrap">
          <input
          
            autofocus
            class="rounded-tr-md sm:rounded-tr-none rounded-tl-md sm:rounded-bl-md p-2 bg-seconary flex-grow"
            placeholder="Enter Url..."
            type="url"
            name="url"
          />
          <select
            class="w-full sm:w-auto p-2 bg-primary text-light sm:rounded-tr-md rounded-br-md rounded-bl-md sm:rounded-bl-none flex-grow-1"
            name="type"
          >
            <option value="insta">Instagram</option>
            <option value="fb">Facebook</option>
            <option value="x">X</option>
            <option value="tiktok">Tiktok</option>
          </select>
        </div>
        <div class="pt-4 flex justify-center">
          <button
            type="submit"
            id="download-btn"
            class="rounded rounded-md p-1.5 text-light bg-primary"
          >
            Download
          </button>
        </div>
      </div>
    </form>
    <div id="loading" class="flex hidden justify-center py-8">
      {% include "components/loader.html" %}
    </div>
    <div id="result" class="hidden py-4">
      <div class="text-center title text-2xl font-bold">
        <p>Video from arslan - Reel</p>
      </div>
      <div class="flex justify-center py-8">
        {% include "components/video.html" %}
      </div>
    </div>
  </div>
</div>
<script>
  new Typewriter("#typewriter", {
    strings: ["Instagram", "Facebook", "Twitter", "Tiktok"],
    autoStart: true,
    loop: true,
  });
</script>

{% endblock main %}