@model MarkdownViewModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .standalone-container {
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    @if (Model.Editable)
    {
    <link rel="stylesheet" href="quill.snow.css" />
    <style>
        #bubble-container {
            width: 100%;
            height: 100%;
        }

        #bubble-container div.ql-editor {
            padding-top:3em;
        }

        .hidden {
            display: none;
        }
    </style>
    }
</head>
<body>
    <div class="standalone-container">
        <div id="bubble-container">@Html.Write(Model.GetHtml())</div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    @if (Model.Editable)
    {
        <script type="text/javascript" src="quill.min.js"></script>
        <script type="text/javascript" src="showdown.js"></script>
        <script type="text/javascript" src="to-markdown.js"></script>
        <script type="text/javascript" src="md-helpers.js"></script>

        <script type="text/javascript">
            var toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }, { 'header': 3 }],               // custom button values
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
      ['link', 'image', 'audio', 'video'],
      ['clean']                                         // remove formatting button
            ];

            var showImageUI = function (value) {
                if (value) {
                    var href = prompt('Enter the URL');
                    this.quill.format('image', href);
                } else {
                    this.quill.format('image', false);
                }
            };

            $(document).ready(function () {
                var quill = new Quill('#bubble-container', {
                    modules: {
                        toolbar: toolbarOptions
                    },
                    placeholder: 'Composez votre texte ...',
                    theme: 'snow'
                });

                function getMD() {
                    return markdownize($('#bubble-container div.ql-editor').html())
                }
                quill.on('text-change', function (delta, oldDelta, source) {
                    if (source === "user") {
                        contentEdited(getMD());
                    }
                });
                var toolbar = quill.getModule('toolbar');
                toolbar.addHandler('image', showImageUI);
                jsLoaded();
            });
        </script>
    }
    else
    {
        <script type="text/javascript">
        $(document).ready(function() {
            jsLoaded();
        });
        </script>
    }
</body>
</html>
