<!-- Gif Export Modal -->
<div id="gifExportModal" class="modal fade" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"> 
                <h5 class="modal-title">Create GIF</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="mb-2">
                    
                <div class="form-group">
                    <label for="gifExportSize">Size (px):</label>
                    <input 
                    class="form-control" 
                    value="200" 
                    step="50"
                    type="number" 
                    id="gifExportSize">
                </div>

                <div class="form-group">
                <label for="gifExportFPS">Frames per Second: </label>
                    <input 
                    class="form-control" 
                    type="number" 
                    id="gifExportFPS" 
                    value="25">
                </div>

                <div class="form-group">
                    <label for="gifExportQuality">Quality (lower is better, but also bigger):</label>
                    <input 
                    class="form-control" 
                    type="number"
                    min="1"
                    max="20"
                    value="10"
                    id="gifExportQuality"
                    >
                </div>

                <div class="form-check">
                    <input 
                    type="checkbox" 
                    class="form-check-input" 
                    id="gifExportGrid">
                    <label for="gifExportGrid">Include Grid</label>
                </div>

                <button id="gifExportCreateBtn" type="button" class="btn btn-primary">Create</button>
            </form>

            <div id="gifExportProgressContainer" class="progress mb-2">
                <div role="progressbar"
                     id="gifExportProgressBar"
                     class="progress-bar progress-bar-striped progress-bar-animated"
                     style="width: 0%"
                    aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                         
                </div>
            </div>

            <div id="gifExportResultContainer" class="mb-2">
                <div class="alert alert-success" id="gifExportResultMessage">
                    <h5 class="alert-heading">Successfully created .gif!</h5>
                    <p class="mb-0">Use Right Click - "Save Image as.." to save or Right Click - "Copy Image" to copy it.</p>
                </div>
                <img alt="result.gif" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="d-block mx-auto" width="200" height="200" id="gifExportResultImage">
            </div>

        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

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