{% 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-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>