<div id="note-revisions-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
    <style>
        #note-revision-content-wrapper {
            flex-grow: 1;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        #note-revision-content {
            overflow: auto;
            word-break: break-word;
        }

        #note-revision-content img {
            max-width: 100%;
            object-fit: contain;
        }

        #note-revision-content pre {
            max-width: 100%;
            word-break: break-all;
            white-space: pre-wrap;
        }
    </style>

    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mr-auto">Note revisions</h5>

                <button class="btn btn-xs"
                        id="note-revisions-erase-all-revisions-button"
                        title="Delete all revisions of this note"
                        style="padding: 0 10px 0 10px;" type="button">Delete all revisions</button>

                <button class="help-button" type="button" data-help-page="Note-revisions" title="Help on Note revisions">?</button>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="display: flex; height: 80vh;">
                <div class="dropdown">
                    <button id="note-revision-list-dropdown" type="button" style="display: none;" data-toggle="dropdown">Dropdown trigger</button>

                    <div id="note-revision-list" style="position: static; height: 100%; overflow: auto;" class="dropdown-menu"></div>
                </div>

                <div id="note-revision-content-wrapper">
                    <div style="flex-grow: 0; display: flex; justify-content: space-between;">
                        <h3 id="note-revision-title" style="margin: 3px; flex-grow: 100;"></h3>

                        <div id="note-revision-title-buttons"></div>
                    </div>

                    <div id="note-revision-content"></div>
                </div>
            </div>
        </div>
    </div>
</div>
