@Master['master.html']
@Section['Content']
<link rel=stylesheet href="/static/codemirror/lib/codemirror.css">
<script src="/static/codemirror/lib/codemirror.js"></script>
<script src="/static/codemirror/mode/xml/xml.js"></script>
<script src="/static/codemirror/mode/javascript/javascript.js"></script>
<script src="/static/codemirror/mode/css/css.js"></script>
<script src="/static/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<style type=text/css>
    .CodeMirror {
        float: left;
        width: 100%;
        height:200px;
        border: 1px solid red;
    }

    iframe {
        width: 100%;
        float: left;
        height: 200px;
        border: 1px solid green;
    }
</style>

<form method="post">
    @IfNot.ShowOnly
    <div class="row mt-2">
        <div class="control-group mb-3">
            <div class="controls">
                <button type="submit" class="btn btn-primary">Speichern</button>
            </div>
        </div>
    </div>
    @EndIf

    @If.TemplateValidationInfo.Invalid
    <div class="alert alert-danger" role="alert">Ihre Eingaben sind ungültig, bitte korrigieren!</div>
    @EndIf

    @If.TemplateValidationInfo.NameContainsInvalidChars
    <div class="alert alert-danger" role="alert">Der Name darf die Zeichen < > * " | : \ / ? nicht enthalten!</div>
    @EndIf

    @If.TemplateValidationInfo.NoFileAccess
    <div class="alert alert-danger" role="alert">MailMonkey besitzt keine Schreibrechte im Unterordner "HtmlTemplates"!</div>
    @EndIf

    @If.SuccessfulSaved
    <div class="alert alert-success" role="alert">Template wurde aktualisiert.</div>
    @EndIf


    <div class="row">
        <div class="col">
            <div class="form-group">
                <small id="NameHelp" class="form-text text-muted">Template-Name</small>
                <input type="text" class="form-control @If.TemplateValidationInfo.NameIsInvalid is-invalid @EndIf" id="Name" name="Name" value="@!Model.Name" aria-describedby="NameHelp" placeholder="Bitte eingeben.">
            </div>
        </div>
    </div>

    <div class="row form-group">
        <input type="hidden" id="NewFileNameB64" name="NewFileNameB64" value="@Model.NewFileNameB64Read">
        <input type="hidden" id="CreationMode" name="CreationMode" value="@Model.CreationMode">
        <div class="col">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="True" @If.IsPublic checked="checked" @EndIf" name="IsPublic" id="IsPublic">
                <label class="form-check-label" for="IsPublic">Template für alle Benutzer freigeben</label>
            </div>
        </div>
    </div>

    <textarea id="Content" name="Content">@Model.Content</textarea>
    <p></p>
    <iframe id="preview"></iframe>
</form>

<script>
    function initializePage() {
        var delay;
        // Initialize CodeMirror editor with a nice html5 canvas demo.
        editor = CodeMirror.fromTextArea(document.getElementById('Content'), { mode: 'text/html' });
        // Store editor instance
        //$('#code').data('CodeMirrorInstance', editor);
        editor.on("change", function () {
            clearTimeout(delay);
            delay = setTimeout(updatePreview, 300);
        });
        updatePreview();
    }

    function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;

        // find editor
        //var editor = $('code').data('CodeMirrorInstance');
        preview.open();
        preview.write(editor.getValue());
        preview.close();
    }
</script>
@EndSection