{% extends "base.html" %}

{% block content %}

<div class="container">
    <div class="header">
        <img src="/static/images/favicon-32x32.png" alt="black outlined cloud with an lime/lightgreen background" srcset="">
        <h1>Weatherify</h1>
    </div>
        
    <hr>

    <div class="center">
        <p>Create your custom playlist based on the weather</p> 
    </div>
                
    <div class="box">
        <form action="/create" method="post">

            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <label for="location">Enter an location:</label>
            <input 
                type="text" 
                name="location" 
                placeholder="t.e.x Stockholm, New York, London"
                class="gap" 
                required
            >
            
            <label for="name">Enter an playlist name:</label>
            <input 
                type="text" 
                id="playlist-name" 
                name="playlist-name"
                placeholder="Enter your playlist-name"
                class="gap"
                required
            >

            <label for="description">Enter an description:</label>   
            <input
                type="text"
                id="playlist-description" 
                name="playlist-description"
                placeholder="Enter your playlist description"
                class="gap"
                required
            >

            <button type="submit" id="create-btn" aria-label="Create playlist">
                Create
            </button>
        </form>
    </div>
</div>
    
{% endblock %}