{% load static %}

<fieldset id="attachments_wrap">
    <legend>
        <button type="button" data-deploy class="btn btn-sm btn-accent shadow text-uppercase">
            <i class="fas fa-plus-square"></i>&nbsp; Tambah Lampiran
        </button>
    </legend>

    {% if attachments %}
        <div class="bg-warning border rounded p-2 mb-3 text-white small" style="width:max-content;">
            <i class="fas fa-info-circle"></i>
            <b>Untuk mengganti lampiran, hapus lampiran lama terlebih dahulu.</b>
        </div>
    {% endif %}

    <div id="attachments_list" class="row">

        <!-- === FILE UTAMA UNTUK PREDIKSI === -->
        <div class="col-12 mb-3">
			
            {% if not attachments %}
            <div class="custom-file">
                <input type="file" class="custom-file-input" name="attachments" id="main_file_input" required>                <label class="custom-file-label">Pilih file utama...</label>
            </div>
			{% endif %}
        </div>

        <!-- === EXISTING ATTACHMENTS === -->
        {% if attachments %}
            {% for attachment in attachments %}
                <div id="att-row-{{ attachment.pk }}" class="col-md-6 mb-2" data-attachment-old data-pk="{{ attachment.pk }}" data-name="{{ attachment.name }}">
                    <div class="input-group input-group-sm">
                        <input class="form-control" value="{{ attachment.name }}" disabled>
                        <div class="input-group-append">
                            <button type="button" data-preview class="btn btn-outline-webapp text-uppercase">Lihat</button>
                            <a href="{% static attachment.path %}" download="{{ attachment.name }}" class="btn btn-outline-success text-uppercase">Unduh</a>
                            <button type="button" onclick="hapusLampiran({{ attachment.pk }})" class="btn btn-outline-danger text-uppercase">Hapus</button>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}


		
        <!-- === INPUT UNTUK MENAMBAHKAN ATTACHMENT BARU === -->
        <div class="col-md-6 mb-2" data-attachment-new>
            <div class="input-group input-group-sm">
                <div class="input-group-append">
                    <button type="button" data-destroy class="btn btn-sm btn-danger text-uppercase">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" name="attachments" multiple>
                    <label class="custom-file-label">Pilih file lampiran...</label>
                </div>
            </div>
        </div>

    </div>
</fieldset>

{% block layout_script %}
<div id="attachments_wait" class="modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p class="mt-0">Sedang melakukan proses upload, <b>mohon untuk tidak menutup laman ini</b>.</p>
                <div class="progress">
                    <div data-wait class="progress-bar progress-bar-animated progress-bar-striped bg-webapp" style="width: 50%">50%</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}