<div id="export-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Export note "<span class="export-note-title"></span>"</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="export-form">
                <div class="modal-body">
                    <div id="export-progress-count-wrapper" class="alert alert-primary" style="padding: 15px;">
                        <strong>Note export progress count:</strong> <span id="export-progress-count"></span>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="export-type" id="export-type-subtree" value="subtree">
                        <label class="form-check-label" for="export-type-subtree">this note and all of its descendants</label>
                    </div>

                    <div id="export-subtree-formats" class="format-choice">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-subtree-format" id="export-subtree-format-html"
                                   value="html">
                            <label class="form-check-label" for="export-subtree-format-html">HTML in TAR archiv - this is recommended since this preserves all the formatting.</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-subtree-format" id="export-subtree-format-markdown"
                                   value="markdown">
                            <label class="form-check-label" for="export-subtree-format-markdown">
                                Markdown - this preserves most of the formatting.
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-subtree-format" id="export-subtree-format-opml"
                                   value="opml">
                            <label class="form-check-label" for="export-subtree-format-opml">
                                OPML - outliner interchange format for text only. Formatting, images and files are not included.
                            </label>
                        </div>

                        <div id="opml-versions">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="opml-version" id="opml-v1" value="1.0">
                                <label class="form-check-label" for="opml-v1">OPML v1.0 - plain text only</label>
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="opml-version" id="opml-v2" value="2.0">
                                <label class="form-check-label" for="opml-v2">OMPL v2.0 - allows also HTML</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="export-type" id="export-type-single" value="single">
                        <label class="form-check-label" for="export-type-single">only this note without its descendants</label>
                    </div>

                    <div id="export-single-formats" class="format-choice">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-single-format" id="export-single-format-html" value="html">
                            <label class="form-check-label" for="export-single-format-html">HTML - this is recommended since this preserves all the formatting.</label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="export-single-format" id="export-single-format-markdown"
                                   value="markdown">
                            <label class="form-check-label" for="export-single-format-markdown">
                                Markdown - this preserves most of the formatting.
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="export-button">Export</button>
                </div>
            </form>
        </div>
    </div>
</div>
