{% comment %} Input context: - form: A stock-create-form {% endcomment %} {% load static %} <div class="modal fade" id="add-stock-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add Stock</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="dropdown"> <input class="form-control" autocomplete="off" data-bs-toggle="dropdown" type="search" id="add-stock-search" placeholder="Search Component" aria-label="Search for Component"> <ul class="dropdown-menu" aria-labelledby="add-stock-search" id="add-stock-search-ac-dropdown"> </div> </div> <form method="post"> {% csrf_token %} <div class="modal-body"> <div id="add-stock-modal-component-container" class="mb-3"> <h4>No component selected.<h4> <!-- Will be filled dynamically by selecting a component from the dropdown list --> </div> <input type="hidden" name="{{form.component_uuid.name}}" id="add-stock-modal-comp-uuid" value="{{form.component_uuid.value}}" required> <div class="mb-3"> <label for="add-stock-form-amount" class="form-label">Amount</label> <input id="add-stock-form-amount" type="number" class="form-control{% if form.amount.errors %} is-invalid{% endif %}" min="0" name="{{form.amount.name}}" value="{{form.amount.value}}" required aria-describedby="add-stock-form-amount-err"> <div id="add-stock-form-amount-err" class="invalid-feedback"> {% for msg in form.amount.errors %} {{msg}} {% endfor %} </div> </div> <div class="mb-3"> <label for="add-stock-form-lot" class="form-label">Lot</label> <input type="text" name="{{form.lot.html_name}}" id="add-stock-form-lot" class="form-control{% if form.lot.errors %} is-invalid{% endif %}" aria-describedby="add-stock-form-lot-err"> <div id="add-stock-form-lot-err" class="invalid-feedback"> {% for msg in form.lot.errors %} {{msg}} {% endfor %} </div> </div> <div class="mb-3"> <label for="add-stock-form-watermark" class="form-label">Watermark</label> <div class="input-group"> <div class="input-group-text"> <input class="form-check-input mt-0" type="checkbox" {% if form.watermark_active.value %}checked{% endif %} name="{{form.watermark_active.name}}"> </div> <input id="add-stock-form-watermark" type="number" class="form-control{% if form.watermark.errors %} is-invalid{% endif %}" name="{{form.watermark.name}}" value="{{form.watermark.value}}" min="0" required aria-describedby="add-stock-form-watermark-err"> <div id="add-stock-form-watermark-err" class="invalid-feedback"> {% for msg in form.watermark.errors %} {{msg}} {% endfor %} </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <input type="submit" class="btn btn-primary" value="Add Stock" name="submit-add-stock"> {% if form.non_field_errors %} {% for error in form.non_field_errors %} <p class="text-danger text-center">{{ error }}</p> {% endfor %} {% endif %} </div> </form> </div> </div> </div> <template id="add-stock-modal-component-template"> <div class="d-flex align-items-center"> <div class="flex-shrink-0"> <img id="add-stock-cmp-img" src="{% static 'css/icons/card-image.svg' %}" style="width:64px;max-height:64px;"> </div> <div class="flex-grow-1 ms-1" id="add-stock-cmp-desc-container"> </div> </div> </template>