<%- include('header.ejs') %>

<main>
    <h2>Upload your plant here!</h2>
    <p>Fill in all information so we can find a perfect home for the specific environment your plant needs!</p>

    <section>
        <p>*Required fields</p>

        <form action="/upload" enctype="multipart/form-data" method="post" class="upload-form">
            <div>
                <label for="plantpic">Choose images<span class="required">*</span></label>
                <input type="file" name="plantpic" id="plantpic" accept="image/*" required>
                <output></output>
            </div>

            <label for="planttype">Plant type<span class="required">*</span></label>
            <input type="text" name="planttype" list="plant-options" id="planttype" required>
            <datalist id="plant-options">
                <% plantTypes.forEach(plant => { %>
                    <option value="<%= plant %>"><%= plant %></option>
                <% }) %>
            </datalist>

            <label for="plantheight">Height<span class="required">*</span></label>
            <input type="number" name="plantheight" id="plantheight" required><span  class="unit-type">cm</span>

            <label for="potdiameter">Current diameter of the pot<span class="required">*</span></label>
            <input type="number" name="potdiameter" id="potdiameter" required><span class="unit-type">cm</span>

            <fieldset>
                <legend>Needs a repot?<span class="required">*</span></legend>
            
                <div>
                    <input type="radio" name="repot" id="yes" value="yes" required>
                    <label for="yes">Yes</label>
                </div>

                <div>
                    <input type="radio" name="repot" id="no" value="no" required>
                    <label for="no">No</label>
                </div>
            </fieldset>

            <label for="sunlight-brightness">Sunlight brightness<span class="required">*</span></label>
            <div class="range-images">
                <img src="../img/icons/shadow.svg" alt="shadow">
                <img src="../img/icons/halfshadowsun.svg" alt="halfshadowsun">
                <img src="../img/icons/sun.svg" alt="sun">
            </div>
            <input type="range" name="sunlightbrightness" id="sunlight-brightness" min="0" max="4" required>

            <label for="water-ammount">Water ammount<span class="required">*</span></label>
            <div class="range-images">
                <img src="../img/icons/singledrop.svg" alt="not so much water">
                <img src="../img/icons/doubledrop.svg" alt="a little water">
                <img src="../img/icons/triodrop.svg" alt="a lot of water">
            </div>
            <input type="range" name="waterammount" id="water-ammount" min="0" max="4" required>

            <fieldset>
                <legend>Soil-type</legend>
            
                <div>
                  <input type="checkbox" id="regular" name="soiltype" value="regular" checked>
                  <label for="regular">Regular</label>
                </div>
            
                <div>
                  <input type="checkbox" id="perlite" name="soiltype" value="perlite">
                  <label for="perlite">Perlite</label>
                </div>

                <div>
                    <input type="checkbox" id="succulent mix" name="soiltype" value="succulent mix">
                    <label for="succulent mix">Succulent mix</label>
                </div>

                <div>
                    <input type="checkbox" id="else" name="soiltype" value="else">
                    <label for="else">Else</label>
                </div>

                <input type="text" name="soiltype" placeholder="Which soil do you use?">
            </fieldset>

            <fieldset>
                <legend>Care level<span class="required">*</span></legend>
            
                <div>
                    <input type="radio" name="carelevel" id="beginner" value="beginner" required>
                    <label for="beginner">Beginner</label>
                </div>

                <div>
                    <input type="radio" name="carelevel" id="intermediate" value="intermediate" required>
                    <label for="intermediate">Intermediate</label>
                </div>

                <div>
                    <input type="radio" name="carelevel" id="expert" value="expert" required>
                    <label for="expert">Expert</label>
                </div>
            </fieldset>

            <label for="additional-info">Additional info</label>
            <textarea id="additional-info" name="additionalinfo" placeholder="Add more info or specialties about your plant "></textarea>

            <div>
                <label for="agreement" id="agreement-label"><span class="required">*</span>I agree with the terms and conditions</label>
                <input type="checkbox" name="agreement" id="agreement" required>
            </div>

            <button type="submit">Upload my plant!</button>
        
          </form>

    </section>

</main>

<%- include('footer.ejs') %>