<!-- Modal -->
<div class="modal fade"  id="image_blockModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Update Image</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
      
      <div class="modal-body">
        <form method="POST" id="edit-image-form" enctype="multipart/form-data">
        <?= csrf_field(); ?>
        <input type="hidden" name="post_id">
        <input type="hidden" name="id">
            <div class="row mb-3">
                <div class="col-lg-5 col-md-5 col-sm-5"><div id="preview-image"></div></div><!-- display old image !-->
                <div class="col-lg-7 col-md-7 col-sm-7"> 
                    <div class="mb-3">
                        <label class="form-label fw-bold" for="image">Add Image</label>
                        <input type="file" name="photo" placeholder="Add image" class="form-control mb-2" id="image" accept=".jpeg, .jpg, .png, .gif">
                    </div>
                    <div class="mb-3">
                    <input type="text" name="caption" placeholder="Enter image caption" class="form-control mb-2">
                    </div>
                </div><!-- image fields !-->
            </div>
        </form>                  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
        <button type="button" onclick="update_imageblock()" class="btn btn-outline-danger d-block w-50 stbtn" >Add Image</button>
      </div>
    </div>
    
  </div>
</div>
<!-- End of Post Block Modal !-->