<div class="col-sm-3"></div>
<div class="col-sm-6" style="text-align: center;">
<h1>New Spell</h1>
<form class="form" style="text-align: left;" action="/content/spell" method="POST">
    <div class="form-group">
        <label for="name"> Name</label>
        <input autocomplete="off" type="text" name="name" value=""class="form-control">
    </div>
    <label>School</label>
    <select class="form-control" name="school">
        <option value="abjuration">Abjuration</option>
        <option value="conjuration">Conjuration</option>
        <option value="divination">Divination</option>
        <option value="enchantment">Enchantment</option>
        <option value="evocation">Evocation</option>
        <option value="illusion">Illusion</option>
        <option value="necromancy">Necromancy</option>
        <option value="transmutation">Transmutation</option>
    </select>
    <label>Source Book:</label>
    <select class="form-control" name="source" id="to-edit">
        <% books.forEach( book=> {%>
            <option value="<%= book._id %>"><%= book.name %></option>
        <% }) %>
    </select>
    <label>Level:</label>
    <select class="form-control" name="lvl">
            <option value="0">Cantrip</option>
            <option value="1">Level 1</option>
            <option value="2">Level 2</option>
            <option value="3">Level 3</option>
            <option value="4">Level 4</option>
            <option value="5">Level 5</option>
            <option value="6">Level 6</option>
            <option value="7">Level 7</option>
            <option value="8">Level 8</option>
            <option value="9">Level 9</option>
    </select>
    <div class="form-group">
        <label>Casting Time:</label>
        <input type="number" name="cast_time">
        <select name="castUnit">
            <option value="ac">Action</option>
            <option value="ra">Reaction</option>
            <option value="ba">Bonus Action</option>
            <option value="min">Min</option>
            <option value="hr">Hour</option>
        </select>       
        <input type="checkbox" name="ritual">
        <label>Ritual</label>
    </div>
    <div class="form-group">
        <label for="name"> Range (0 for touch and -1 for self):</label>
        <input autocomplete="off" type="number" name="range" value="0"class="form-control" >
    </div>
    <div class="form-group">
        <label>Components:</label><br>
        <input type="checkbox" name="Verbal" value="true">
        <label> Verbal</label><br>
        <input type="checkbox" name="Somatic" value="true">
        <label> Somatic</label><br>
        <label for="Material">Material</label>
        <input type="text" name="Material">
    </div>
    <div class="form-group">
        <label>Duration:</label>
        <input type="number" name="Duration" value="0">
        <select name="durUnit">
            <option value="rnd">Round</option>
            <option value="min">Minute</option>
            <option value="hr">Hour</option>
            <option value="day">Day</option>
            <option value="dis">Until dispelled</option>
            <option value="spe">Special</option>
        </select>       
        <input type="checkbox" name="Concentration">
        <label>Concentration</label>
    </div>
    <div class="form-group">
        <label for="disc"> Description:</label>
        <textarea name="description" class="form-control" id="disc"></textarea>
    </div>
    <div class="form-group">
        <label for="disc"> At Higer Levels</label>
        <textarea name="Higher_Level" class="form-control" id="disc"></textarea>
    </div>
    <button type="submit"  class="btn btn-default">Create</button>
</form>
</div>