<script>
  import svelteLogo from './assets/svelte.svg'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <button class="btn btn-primary">Button</button>
  <div>
    <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> 
      <img src="/vite.svg" class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1 class="justify-center rounded-md p-2.5 text-red-700 bg-blue-500">Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
  </p>

  <p class="read-the-docs">
    Click on the Vite and Svelte logos to learn more
  </p>

  <!-- <div class="mockup-window border border-base-300">
    <div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
  </div> -->


  <div class="form-control">
    <label class="label cursor-pointer">
      <span class="label-text">Remember me</span> 
      <input type="checkbox" checked="checked" class="checkbox checkbox-primary" />
    </label>
  </div>
  
  <input type="radio" name="radio-2" class="radio radio-primary" checked />
  <input type="radio" name="radio-2" class="radio radio-primary" />

  <div class="form-control w-full max-w-xs">
    <label class="label">
      <span class="label-text">Pick the best fantasy franchise</span>
      <span class="label-text-alt">Alt label</span>
    </label>
    <select class="select select-bordered">
      <option disabled selected>Pick one</option>
      <option>Star Wars</option>
      <option>Harry Potter</option>
      <option>Lord of the Rings</option>
      <option>Planet of the Apes</option>
      <option>Star Trek</option>
    </select>
    <label class="label">
      <span class="label-text-alt">Alt label</span>
      <span class="label-text-alt">Alt label</span>
    </label>
  </div>

  <div class="form-control w-full max-w-xs">
    <label class="label">
      <span class="label-text">What is your name?</span>
      <span class="label-text-alt">Alt label</span>
    </label>
    <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
    <label class="label">
      <span class="label-text-alt">Alt label</span>
      <span class="label-text-alt">Alt label</span>
    </label>
  </div>

</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
  .read-the-docs {
    color: #888;
  }
</style>
