DweebUI/components/permissions_modal.js

export const permissionsModal = (data) => {
  

  let modal = `
        <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollables">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Permissions</h5>
            </div>
            <div class="modal-body">
              <form action="" id="details_modal" method="POST">
            
              <div class="accordion" id="modal-accordion">


                <div class="accordion-item" style="border: 1px solid grey;">
                  <h2 class="accordion-header" id="heading-1">
                    <button class="accordion-button collapsed row" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
                      <span class="avatar avatar-sm bg-green-lt col-3 text-start">JD</span>
                        <div class="col text-end" style="margin-right: 10px;">Jane Doe</div>
                    </button>
                  </h2>
                  <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
                    <div class="accordion-body pt-0">


                      <div class="mb-2">
                        <div class="">

                          <div class="row mb-3">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  All
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_image">
                              </label>
                            </div>
                          </div>

                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  View
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_image">
                              </label>
                            </div>
                          </div>
          
                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Uninstall
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_image">
                              </label>
                            </div>
                          </div>
          
                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Edit
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>

                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Upgrade
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>

                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Start
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>

                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Stop
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>

                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Pause
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>

                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Restart
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>


                          <div class="row mb-2">
                            <div class="col-9">
                              <label class="row text-start">
                                <span class="col">
                                  Logs
                                </span>
                              </label>
                            </div>
                            <div class="col-3">
                              <label class="form-check form-check-single form-switch text-end">
                                <input class="form-check-input" type="checkbox" name="remove_backups">
                              </label>
                            </div>
                          </div>


                        </div>
                      </div>

                    </div>
                  </div>
                </div>


                <div class="accordion-item mt-2" style="border: 1px solid grey;">
                  <h2 class="accordion-header" id="heading-2">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
                      Volumes
                    </button>
                  </h2>

                  <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
                    <div class="accordion-body pt-0">
                      
                    </div>
                  </div>
                </div>


                <div class="accordion-item mt-2" style="border: 1px solid grey;">
                  <h2 class="accordion-header" id="heading-3">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
                      Environment Variables
                    </button>
                  </h2>
                  <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
                    <div class="accordion-body pt-0">
    
                    </div>
                  </div>
                </div>


                <div class="accordion-item mt-2" style="border: 1px solid grey;">
                  <h2 class="accordion-header" id="heading-4">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
                      Labels
                    </button>
                  </h2>
                  <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
                    <div class="accordion-body pt-0">
    
                    </div>
                  </div>
                </div>


                <div class="accordion-item mt-2" style="border: 1px solid grey;">
                  <h2 class="accordion-header" id="heading-5">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-5" aria-expanded="false">
                      Extras
                    </button>
                  </h2>
                  <div id="collapse-5" class="accordion-collapse collapse" data-bs-parent="#modal-accordion">
                    <div class="accordion-body pt-0">
    
                    </div>
                  </div>
                </div>

              </div>
              </form>
            </div>
            <div class="modal-footer">
              <div class="row">

                  <label class="form-check form-switch col">
                    <input class="form-check-input" type="checkbox">
                    <span class="form-check-label">Reset</span>
                  </label>
              
                <div class="col">
                  <button type="button" class="btn btn-danger" data-bs-dismiss="modal" disabled="">Reset</button>
                </div>
                <div class="col">
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Update</button>
                </div>
              </div>
            </div>
          </div>
        </div>`;

    return modal;
}