{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
<!-- include required css cdn link through html here -->
{% include "cdn_through_html/filepond_cdn_css.html" %}

{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <a onclick="history.back()" style="height: fit-content;width: fit-content;display: inline-block;">
                <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
                    arrow_back
                    </span><span>Edit Profile</span></h3>
                </a>
            </div>
        </div>

        <div class="row layout-spacing">
            <div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area">
                        <!-- <form class="section general-info">
                            <div class="info">
                                <h6 class="">Profile</h6>
                                <div class="row">
                                    <div class="col-lg-11 mx-auto">
                                        <div class="row">
                                            <div class="col-xl-2 col-lg-12 col-md-4">
                                                <div class="profile-image">
                                                    <div class="img-uploader-content">
                                                        <input type="file" class="filepond"
                                                            name="filepond" accept="image/png, image/jpeg"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-10 col-lg-12 col-md-8 mt-md-0 mt-4">
                                                <div class="form">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="fullName">First Name</label>
                                                                <input type="text" class="form-control mb-3"
                                                                    id="fullName" placeholder="Full Name"
                                                                    value="Jimmy Turner">
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="profession">Last Name</label>
                                                                <input type="text" class="form-control mb-3"
                                                                    id="profession" placeholder="Designer"
                                                                    value="Web Developer">
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12 mt-1">
                                                            <div class="form-group text-end">
                                                                <button
                                                                    class="btn btn-secondary _effect--ripple waves-effect waves-light">Save</button>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form> -->
                        <form method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            {% include 'base_structure/includes/dynamic_template_form.html' with form=form %}
                            <div class="mt-4 mb-0">
                                <div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{% endblock content %}

{% block javascript %}

<!-- include required css cdn link through html here -->
{% include "cdn_through_html/filepond_cdn_js.html" %}


<script>
    /**
     * ==================
     * Single File Upload
     * ==================
    */

    // We register the plugins required to do 
    // image previews, cropping, resizing, etc.
    FilePond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginImageExifOrientation,
            FilePondPluginFileValidateSize,
            // FilePondPluginImageEdit
        );

        // Select the file input and use 
        // create() to turn it into a pond
        const inputElement = document.getElementById('id_profile_photo');
        const pond = FilePond.create(inputElement, {
            storeAsFile: true,
            dropOnPage: true
        });
        // Get the profile photo URL using Django template syntax
        const profilePhotoUrl = "{% if form.profile_photo.value %}{{ form.profile_photo.value.url }}{% endif %}";

        if (profilePhotoUrl) {
            // If the URL exists, add the profile photo to FilePond
            pond.addFile(profilePhotoUrl);
}

</script>
{% endblock %}