<%- include('partials/head', { 
    scripts: [ { opts: "defer", file: "contribute.js" } ]
}) %>

<%- include('partials/header') %>
    <main>
        <%- include('partials/headTitle', {
            title: "Everybody wants to contribute!", 
            content: "Well I'm here to help you out, we need some kind of informations before..."
        }) %>
        <div class="container">
            <div class="row g-5">
                <div class="col-md-12 col-lg-12">
                    <h2 class="mb-3 paddinme">Details about you</h2>
                    <form class="needs-validation" id="contributeForm" onsubmit="sendForm(); return false;">
                        <div class="row g-3">
                            <%- include('partials/bigInputText', {
                             id: "firstName",
                             title: "First name",
                             wrongMsg: "Valid first name is required."
                            }) %>
                            <%- include('partials/bigInputText', {
                             id: "lastName",
                             title: "Last name",
                             wrongMsg: "Valid last name is required."
                            }) %>

                            <div class="col-12">
                                <label for="username" class="form-label">Username</label>
                                <div class="input-group has-validation">
                                    <span class="input-group-text">@</span>
                                    <input type="text" class="form-control" id="username" placeholder="Username" required>
                                    <div class="invalid-feedback">
                                        Your username is required.
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="you@example.com">
                                <div class="invalid-feedback">
                                    Please enter a valid email address for shipping updates.
                                </div>
                            </div>

                            <hr class="my-4">

                            <h2 class="mb-3">Let's see how the planet is: </h2>

                            <div class="card">
                                <div class="card-body text-center d-flex justify-content-center align-items-center flex-column">
                                    <h5>This is the most important part In My Opinion, the color...</h5>
                                    <input id="colorPicker" type="color"/>
                                </div>
                            </div>

                            <%- include('partials/bigInputText', {
                             id: "planetName",
                             title: "Name",
                             wrongMsg: "Karen, enter the name of the planet..."
                            }) %>

                            <%- include('partials/bigInputText', {
                             id: "planetDescription",
                             title: "Description",
                             wrongMsg: "The description is important Keren..."
                            }) %>

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="planetType">Type</label>
                                    <select class="custom-select d-block w-100" id="planetType" required="">
                                        <option value="superEarth">Super-Earth</option>
                                        <option value="giantPlanet">Giant planet</option>
                                        <option value="icePlanet">Ice planet</option>
                                        <option value="mesoPlanet">Mesoplanet</option>
                                        <option value="miniNeptune">Mini-Neptune</option>
                                        <option value="planetar">Planetar</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Please select a valid planet type
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="material" class="form-label">Material</label>
                                    <input type="text" class="form-control" id="material" placeholder="Rock" value="" required>
                                    <div class="invalid-feedback">
                                        Material is required
                                    </div>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="solarSystem" class="form-label">Solar System</label>
                                    <input type="text" class="form-control" id="solarSystem" placeholder="Milky Way" value="">
                                </div>
                            </div>

                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="canSustainEarthLife">
                                <label class="form-check-label" for="canSustainEarthLife">Mmm, important question, can it sustain Earth life?</label>
                            </div>

                            <hr class="my-2">

                            <h4 class="mb-3">Nerd data: </h4>

                            <div class="row g-1">
                                <%- include('partials/inputText', {
                                 id: "distanceToEarth",
                                 title: "Distance to Earth",
                                 label: "Km",
                                 wrongMsg: "The distance is important Keren!"
                                }) %>
                                <%- include('partials/inputText', {
                                 id: "mass",
                                 title: "Mass",
                                 label: "Kg",
                                 wrongMsg: "Mass is important Keren!"
                                }) %>
                                <%- include('partials/inputText', {
                                 id: "volume",
                                 title: "Volume",
                                 label: "V",
                                 wrongMsg: "Ah Volumne, this is also important..."
                                }) %>
                            </div>
                            <div class="row g-3">
                                <%- include('partials/inputText', {
                                 id: "gravity",
                                 title: "Gravity",
                                 label: "m/s^2",
                                 wrongMsg: "Grativation, one day will pull you away!"
                                }) %>
                                <%- include('partials/inputText', {
                                 id: "acceleration",
                                 title: "Acceleration",
                                 label: "Km/h",
                                 wrongMsg: "Acceleration, the thing you increase in order to impress girls!"
                                }) %>
                                <%- include('partials/inputText', {
                                 id: "density",
                                 title: "Density",
                                 label: "Kg/m^3",
                                 wrongMsg: "Karen, I dare you!"
                                }) %>
                            </div>

                            <hr class="my-2">
                            <h4 class="mb-3">Discovery data: </h4>

                            <div class="col-12">
                                <label for="imgLink" class="form-label">Image link</label>
                                <input type="link" class="form-control" id="imgLink" placeholder="https://img.com/img" required>
                                <div class="invalid-feedback">
                                    Please provide a valid website
                                </div>
                            </div>

                            <div class="row g-1">
                                <div class="col-6">
                                    <label for="discoveredOn" class="form-label">When that happened?</label>
                                    <div class="input-group has-validation">
                                        <input type="date" class="form-control" id="discoveredOn" required>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <label for="discoveredBy" class="form-label">Who discovered this?</label>
                                    <div class="input-group has-validation">
                                        <input type="text" class="form-control" id="discoveredBy" placeholder="Whom discovered this?" required>
                                        <div class="invalid-feedback">
                                            Karen, I dare you!
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">
                            <h5 class="mb-3">Here you go, tell us some facts about this planet, if you have of course: </h5>

                            <div class="form-floating">
                                <textarea class="form-control" placeholder="Leave a comment here" id="facts" style="height: 100px"></textarea>
                                <label for="facts">Facts</label>
                            </div>

                            <button class="w-100 btn btn-warning btn-lg" onClick="sendForm()" type="submit">Add this bad boy!</button>
                    </form>
                </div>
            </div>
        </div>
    </main>
<%- include('partials/footer') %>
