<!-- Save Scene Modal -->
<div class="modal fade" id="save-scene-modal" tabindex="-1" aria-labelledby="save-scene-modal-label" aria-hidden="true">
    <div class="spinner-overlay" id="save-scene-spinner-overlay"></div>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="save-scene-modal-label">Save Scene</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Save Scene Spinner Wheel -->
                <div class="spinner-container d-flex justify-content-center">
                    <div id='save-scene-spinner-wheel' class="spinner-wheel" role="status"></div>
                </div>
                <form id="save-scene-form" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="scene-name">Scene Name</label>
                        <input type="text" class="form-control" id="scene-name" name="scene-name" placeholder="Enter scene name">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div id="error-message-save-scene" class="alert alert-danger" role='alert' style="display: none;"></div>
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary" id="save-scene-button">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
