<div class="modal fade" id="itemModal" role="dialog" aria-labelledby="itemModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                 <h4>{{ object.name|default:"New Event" }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="item-form">
                <div class="modal-body">
                    <div class="form-group form-row">
                        <label for="item_name" class="col-sm-2 col-form-label">Item Name</label>
                        <div class="col-sm-10">
                            <input type="text" placeholder="Item Name" class="form-control" required maxlength="255"
                                   id="item_name"/>
                        </div>
                    </div>
                    <div class="form-group form-row" data-toggle="tooltip" title="A detailed description of the kit. MD enabled.">
                        <label for="item_description" class="col-sm-2 col-form-label">Description</label>
                        <div class="col-sm-10">
                            <textarea type="text" placeholder="Description" class="form-control md-enabled"
                                      id="item_description" rows="8"></textarea>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-sm-6">
                            <div class="form-group form-row">
                                <label for="item_quantity" class="col-sm-4 col-form-label">Quantity</label>
                                <div class="col-sm-8">
                                    <input type="number" placeholder="Quantity" class="form-control" required
                                           min="1" id="item_quantity"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group form-row">
                                <label for="item_cost" class="col-sm-4 col-form-label">Cost</label>

                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text">£</span></div>
                                        <input type="number" placeholder="Cost" class="form-control" required
                                               min="-99999999.99" max="99999999.99" step="0.01"
                                               id="item_cost"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
</div>
