<!-- New Recovery Plan Modal -->
<div class="modal fade" id="newRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="newRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="newRecoveryplanForm">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="newRecoveryplanLabel">Create a new Recovery Plan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="needs-validation" novalidate>
                    <div class="mb-2">
                        <label for="plan-name-input">Plan Name:</label>
                        <input type="text" class="form-control" id="plan-name-input" required name="name">
                        <div class="invalid-feedback">
                            Mandatory field.
                        </div>
                    </div>
                    <div class="mb-2">
                        <label for="planDescription">Description:</label>
                        <textarea id="planDescription" name="" cols="40" rows="5" class="form-control"></textarea>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">OK</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- New Recovery Plan End -->
<!-- New Migration Plan Modal -->
<div class="modal fade" id="newMigrationplan" tabindex="-1" role="dialog" aria-labelledby="newMigrationLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="newMigrationForm">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="newMigrationLabel">Create a new Migration Plan</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="needs-validation" novalidate>
                    <div class="mb-2">
                        <label for="plan-name-input">Plan Name:</label>
                        <input type="text" class="form-control" id="plan-name-input" required>
                        <div class="invalid-feedback">
                            Mandatory field.
                        </div>
                    </div>
                    <div class="mb-2">
                        <label for="planDescription">Description:</label>
                        <textarea id="planDescription" name="" cols="40" rows="5" class="form-control"></textarea>
                    </div>
                    <div class="d-flex">
                        <label for="" class="pr-2">Enable auto sync:</label>
                        <div class="switch_box box_1">
                            <input type="checkbox" class="switch_1">
                        </div>
                    </div>
                    <div class="">
                        at:
                        <input type="datetime-local" class="form-datetime-picker">
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">OK</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- New Migration Plan End -->
<!-- Edit Recovery Plan Modal -->
<div class="modal fade" id="editRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="editRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="editRecoveryplanForm">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="editRecoveryplanLabel">Edit Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="needs-validation" novalidate>
                    <div class="mb-2">
                        <label for="plan-name-input">Plan Name:</label>
                        <input type="text" class="form-control" id="plan-name-input" required>
                        <div class="invalid-feedback">
                            Mandatory field.
                        </div>
                    </div>
                    <div class="mb-2">
                        <label for="planDescription">Description:</label>
                        <textarea id="planDescription" name="" cols="40" rows="5" class="form-control"></textarea>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">OK</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Recovery Plan End -->
<!-- Delete Recovery Plan Modal -->
<div class="modal fade" id="deleteRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="deleteRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="deleteRecoveryplanLabel">Delete Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the selected plan?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- Delete Recovery Plan End -->
<!-- Suspend Recovery Plan Modal -->
<div class="modal fade" id="suspendRecoveryPlan" tabindex="-1" role="dialog" aria-labelledby="deleteRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="deleteRecoveryplanLabel">Suspend Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to suspend the selected plan?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- Suspend Recovery Plan End -->
<!-- Test Recovery Plan Modal -->
<div class="modal fade" id="testRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="testRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="testRecoveryplanLabel">Test Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to test the selected plan?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">ok</button>
            </div>
        </div>
    </div>
</div>
<!-- Test Recovery Plan End -->
<!-- Clean Up Recovery Plan Modal -->
<div class="modal fade" id="cleanupRecoveryPlan" tabindex="-1" role="dialog" aria-labelledby="testRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="testRecoveryplanLabel">Cleanup Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to cleanup the selected plan?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">ok</button>
            </div>
        </div>
    </div>
</div>
<!-- Clean Up Recovery Plan End -->
<!-- Failover Recovery Plan Modal -->
<div class="modal fade" id="failoverRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="failoverRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="failoverRecoveryplanLabel">Failover Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to start the selected plan?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">ok</button>
            </div>
        </div>
    </div>
</div>
<!-- Failover Recovery Plan End -->
<!-- Migrate Recovery Plan Modal -->
<div class="modal fade" id="migrateRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="migrateRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="migrateRecoveryplanLabel">Migrate Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to migrate the selected plan?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">ok</button>
            </div>
        </div>
    </div>
</div>
<!-- Migrate Recovery Plan End -->
<!-- Executions Modal -->
<div class="modal fade" id="executionModal" tabindex="-1" role="dialog" aria-labelledby="executionModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width: 900px;">
        <div class="modal-content" id="">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="migrateRecoveryplanLabel">Recovery Plan Executions</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row my-3">
                    <div class="col-md-12">
                        <!-- Buttons -->
                        <div class="row m-3">
                            <div class="col text-left pl-0">
                                <button class="btn-action text-primary border-0 bg-transparent font-weight-bold text-capitalize mr-2" id="button_download" data-toggle="modal" data-target="#formModal">view report file</button>
                            </div>
                            <div class="col-6 text-right pr-0">
                                <div class="datePicker">
                                    from<input type="date" class="picker" id="startTimeAfter">to<input type="date" class="picker" id="startTimeBefore">
                                </div>
                            </div>
                        </div>

                        <!-- table -->
                        <div class="row">
                            <div class="col-sm-12">
                                <table id="headercontainer-1066" class="table table-striped table-bordered nowrap dataTable no-footer" role="grid" aria-describedby="data_table_event_info">
                                    <thead>
                                        <tr role="row">
                                            <th></th>
                                            <th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Operation: activate to sort column descending" style="width: 300px;" aria-sort="ascending">Operation</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Start Date: activate to sort column ascending" style="width: 43px;">Start Date</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="End Date: activate to sort column ascending" style="width: 105px;">End Date</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Result: activate to sort column ascending" style="width: 202px;">Result</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr role="row" class="odd">
                                            <td><input type="radio"></td>
                                            <td>Test</td>
                                            <td>1/2/2024, 3:17:01 PM</td>
                                            <td>1/2/2024, 3:17:01 PM</td>
                                            <td><i class="fas fa-check-circle" style="color: #54b948;"></i>&nbsp;Success</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div id="" class="dataTables_processing card" style="display: none;">
                                    Processing...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">ok</button>
            </div>
        </div>
    </div>
</div>
<!-- Executions End -->
<!-- Clone Recovery Plan Modal -->
<div class="modal fade" id="cloneRecoveryplan" tabindex="-1" role="dialog" aria-labelledby="cloneRecoveryplanLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="cloneRecoveryplanForm">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="cloneRecoveryplanLabel">Clone Recovery Plan&nbsp;|&nbsp;<span class="text-primary" style="font-size: 12px;">meow</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="needs-validation" novalidate>
                    <div class="mb-4">
                        <label for="plan-name-input">Plan Name:</label>
                        <input type="text" class="form-control" id="plan-name-input" required>
                        <div class="invalid-feedback">
                            Mandatory field.
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="switch_box box_1 pr-2">
                            <input type="checkbox" class="switch_1">
                        </div>
                        <label for="" class="">Do not attach replications</label>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">OK</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- Clone Recovery Plan End -->

<!-- New Recovery Step -->
<div class="modal fade" id="newRecoveryStep" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-gfs-policy" role="document" style="max-width: 900px !important;overflow:0 !important;">
        <div class="modal-content border-0" style="overflow:0 !important;">
            <div class="modal-header border-top-blue">
                <h5>NEW RECOVERY STEP</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="row px-3">
                    <!-- Left Side Bar -->
                    <div class="col-md-3 col-12 p-0 border-right">
                        <div class="sidebar-custom flex-column nav-pills text-left progress-bar">
                            <a class="active step-link sidebar-step" href="#step-settings-recover">Step Settings</a>
                            <a class="step-link sidebar-step" href="#source-replications-recover">Recover Replications</a>
                            <a class="step-link sidebar-step" href="#complete-recover">Ready to Complete</a>
                        </div>
                    </div>
                    <!-- Right Side Bar -->
                    <div class="col-md-9 col-12 p-0">
                        <!-- Adjust column size based on screen width -->
                        <!--=========== Step Settings =================== -->
                        <div class="main-form active" id="step-settings-recover">
                            <div class="m-3">
                                <div class="mb-3">
                                    <label for="">Step Name:</label>
                                    <input id="" name="jobName" type="text" aria-describedby="HelpBlock" required="required" class="form-control">
                                </div>
                                <ul class="list-group list-stepSettings mb-3">
                                    <li class="list-group-item list-stepSettings-Title" style="border-radius: 10px 10px 0px 0px !important;">
                                        <input type="checkbox" name="" id="">
                                        Wait specific amount of time after failover completes
                                    </li>
                                    <li class="list-group-item list-stepSettings-content">
                                        <label class="pr-2 m-0">Delay</label>
                                        <input min="1" value="" type="number" id="" name="" class="line-select" style="width: 100px">
                                        <select class="line-select" style="width: 100px;">
                                            <option value="">seconds</option>
                                            <option value="">minutes</option>
                                        </select>
                                    </li>
                                    <li class="list-group-item list-stepSettings-Title">
                                        <input type="checkbox" name="" id="">
                                        Prompt user after failover of all replications in this step completes
                                        <i class="fas fa-info-circle px-2" style="color: #5aa6c9;" data-toggle="tooltip" data-placement="top" title=" The prompt message will pause plan execution. It needs to be confirmed to allow execution to continue. "></i>

                                    </li>
                                    <li class="list-group-item list-stepSettings-content">
                                        <div class="mb-3">
                                            <label for="textarea-1501-inputEl">Message:</label>
                                            <textarea id="textarea-1501-inputEl" name="textarea-1483-inputEl" cols="40" rows="5" class="form-control"></textarea>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                        </div>

                        <!--=========== Source Replications =================== -->
                        <div class="main-form" id="step-settings-recover">
                            <div class="m-3">
                                <div class="table-responsive scroll-widget">
                                    <div id="data_table_s3_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-6">
                                                <div class="dataTables_length" id="data_table_s3_length">
                                                    <label>Show
                                                        <select name="data_table_s3_length" aria-controls="data_table_s3" class="custom-select custom-select-sm form-control form-control-sm" style="width: 70px;">
                                                            <option value="10">10</option>
                                                            <option value="25">25</option>
                                                            <option value="50">50</option>
                                                            <option value="100">100</option>
                                                        </select> entries
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-sm-12 col-md-6 py-2 text-right">
                                                <a href="" class="">&nbsp;<i class="fas fa-sync fa-rotate-90" style="color: #57ba4b;"></i>&nbsp;Refresh</a>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <table id="data_table_event" class="table table-striped table-bordered nowrap dataTable no-footer" role="grid" aria-describedby="data_table_event_info">
                                                    <thead>
                                                        <tr role="row">
                                                            <th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Name: activate to sort column descending" style="width: 30%;" aria-sort="ascending">
                                                                VM
                                                            </th>
                                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
                                                                Recovery State</th>
                                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
                                                                Destination Organization</th>
                                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
                                                                Replication Type</th>
                                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
                                                                Replication State</th>
                                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 30%;">
                                                                Overall Health</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr role="row" class="odd">
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div id="" class="dataTables_processing card" style="display: none;">
                                                    Processing...
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12 col-md-5">
                                                <div class="dataTables_info" id="data_table_s3_info" role="status" aria-live="polite">Showing 1 to 1 of 1 entries</div>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="dataTables_paginate paging_simple_numbers" id="data_table_s3_paginate">
                                                    <ul class="pagination">
                                                        <li class="paginate_button page-item previous disabled" id="data_table_s3_previous"><a href="#" aria-controls="data_table_s3" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
                                                        <li class="paginate_button page-item active"><a href="#" aria-controls="data_table_s3" data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
                                                        <li class="paginate_button page-item next disabled" id="data_table_s3_next"><a href="#" aria-controls="data_table_s3" data-dt-idx="2" tabindex="0" class="page-link">Next</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="alert alert-info m-2 row" role="alert">
                                    <div class="col-1">
                                        <i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
                                    </div>
                                    <div class="col">
                                        By selecting a vApp, if later on a new VM is added to it, executing this plan will also affect the additionally added VM.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--=========== Ready to complete =================== -->
                        <div class="main-form" id="complete-recover">
                            <h5 class="font-weight-bold p-2 border-bottom">Ready to Complete</h5>
                            <div class="m-3">
                                <p>Verify the selected settings before clicking Finish:</p>
                                <table class="tg" style="table-layout: fixed; width: 539px">
                                    <colgroup>
                                        <col style="width: 270px">
                                        <col style="width: 269px">
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Step Name</span></td>
                                            <td class="tg-0lax"><span style="color:#000;background-color:#FFF">111</span></td>
                                        </tr>
                                        <tr>
                                            <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Delay</span></td>
                                            <td class="tg-0lax">22 seconds</td>
                                        </tr>
                                        <tr>
                                            <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Prompt VM placement policy</span></td>
                                            <td class="tg-0lax">None</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- Buttons -->
            <div class="row py-1 px-3 d-flex m-2 justify-content-end border-top">
                <button class="btn btn-primary text-uppercase mr-2 back-button" style="display: none;">previous</button>
                <button class="btn btn-primary text-uppercase mr-2 next-button">next</button>
                <button class="btn btn-primary text-uppercase" data-dismiss="modal" id="closeAllModalsButton">cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Attach Replications Modal -->
<div class="modal fade" id="attachReplications" tabindex="-1" role="dialog" aria-labelledby="attachReplicationsLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="max-width: 900px;">
        <div class="modal-content" id="">
            <div class="modal-header border-top-blue">
                <h5 class="modal-title" id="attachReplicationsLabel">Attach Replications</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row my-3">
                    <div class="col-md-12">
                        <!-- table -->
                        <div class="row">
                            <div class="col-sm-12">
                                <table id="attachRep-table" class="table table-striped table-bordered nowrap dataTable no-footer" role="grid" aria-describedby="data_table_event_info">
                                    <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="VM: activate to sort column descending" style="width: 300px;" aria-sort="ascending">VM</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Recovery State: activate to sort column ascending" style="width: 43px;">Recovery State</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Replication Type: activate to sort column ascending" style="width: 105px;">Replication Type</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Replication State: activate to sort column ascending" style="width: 202px;">Replication State</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Overall Health: activate to sort column ascending" style="width: 202px;">Overall Health</th>
                                            <th class="sorting" tabindex="0" aria-controls="data_table_event" rowspan="1" colspan="1" aria-label="Destination Organization: activate to sort column ascending" style="width: 202px;">Destination Organization</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr role="row" class="odd">
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div id="" class="dataTables_processing card" style="display: none;">
                                    Processing...
                                </div>
                            </div>
                        </div>

                        <!-- Alert info -->
                        <div class="alert alert-info m-2 row" role="alert">
                            <div class="col-1">
                                <i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
                            </div>
                            <div class="col">
                                By selecting a vApp, if later on a new VM is added to it, executing this plan will also affect the additionally added VM.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">ok</button>
            </div>
        </div>
    </div>
</div>
<!-- Attach Replications End -->




<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>