@section Styles{
<style>
    .modal-body label {
        padding: 0px;
    }
</style>
}@section Scripts{
<script>
    var popups, modal = true;
    function showPopup(name) {
        var popup, inputs;
        if (!popups) {
            popups = {};
            popups["login"] = wijmo.Control.getControl("#popupLogin");
            popups["create"] = wijmo.Control.getControl("#popupCreate");
            popups["edit"] = wijmo.Control.getControl("#popupEdit");
        }

        popup = popups[name];
        if (popup) {
            inputs = popup.hostElement.querySelectorAll('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type != 'checkbox') {
                    inputs[i].value = '';
                }
            }
            popup.modal = modal;
            popup.show();
        }
    }

    function check(pwd1, pwd2) {
        if (pwd1.value !== pwd2.value) {
            pwd2.setCustomValidity("Passwords don't match.");
        } else {
            pwd2.setCustomValidity("");
        }
    }

    function checkCreate() {
        var pwd1 = document.getElementById("createPwd1"),
            pwd2 = document.getElementById("createPwd2");
        check(pwd1, pwd2);
    }

    function checkEdit() {
        var pwd1 = document.getElementById("editPwd1"),
            pwd2 = document.getElementById("editPwd2");
        check(pwd1, pwd2);
    }

    function changeModal() {
        modal = wijmo.getElement("#modal").checked;
    }

    //The first input element will get focus after dialog shown.
    function autoFocus(control) {
        control.hostElement.querySelector("input").focus();
    }

    function hideDialog(evt, msg) {
        // hide dialog
        for (var e = evt.target; e; e = e.parentElement) {
            if (wijmo.hasClass(e, 'wj-popup')) {
                var dlg = wijmo.Control.getControl(e);
                dlg.hide();
            }
        }

        // show alert
        alert(msg);
    }
</script>
}

<label>Dialogs (Popups with no owner)</label><br />
<!-- The login popup dialog -->
<c1-popup class="modal-content col-md-6" id="popupLogin" hide-trigger="None" shown="autoFocus">
    <form>
        <h4 class="modal-header">
            Log in
            <button type="button" tabindex="-1" class="close wj-hide">×</button>
        </h4>
        <div class="modal-body">
            <label>
                Email: <input class="form-control" required="" type="email">
            </label>
            <br>
            <label>
                Password: <input class="form-control" type="password" required="" pattern=".{4,}" title="Please enter 4 characters or more.">
            </label>
            <br>
            <label>
                Remember Me
                <input type="checkbox">
            </label>
            <br>
            <a href="#" class="wj-hide" onclick="showPopup('create')">Don't have an account yet?</a>
        </div>
        <div class="modal-footer">
            <div style="float:left">
                <img src="~/Content/css/images/icons/30/facebook.png" title="Log in using your Facebook account"
                     onclick="hideDialog(event, 'logging in via Facebook...')">
                <img src="~/Content/css/images/icons/30/google.png" title="Log in using your Google account"
                     onclick="hideDialog(event, 'logging in via Google...')">
            </div>
            <button class="btn btn-primary" type="submit">
                Log in
            </button>
        </div>
    </form>
</c1-popup>

<!-- The content of popup dialog to create account. -->
<c1-popup class="modal-content col-md-6" id="popupCreate" hide-trigger="None" shown="autoFocus">
    <form>
        <h4 class="modal-header">
            Create Account
            <button type="button" tabindex="-1" class="close wj-hide">×</button>
        </h4>
        <div class="modal-body">
            <label>
                Name:
                <input class="form-control" required="" pattern=".{2,}" title="Please enter 2 characters or more.">
            </label>
            <br>
            <label>
                Email:
                <input class="form-control" required="" type="email">
            </label>
            <br>
            <label>
                Password:
                <input class="form-control" type="password" id="createPwd1" required="" pattern=".{4,}" title="Please enter 4 characters or more.">
            </label>
            <br>
            <label>
                Confirm Password:
                <input class="form-control " type="password" id="createPwd2" required="" pattern=".{4,}" title="Please enter 4 characters or more.">
            </label>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="submit" onclick="checkCreate()">
                Create Account
            </button>
        </div>
    </form>
</c1-popup>

<c1-popup class="modal-content col-md-6" id="popupEdit" hide-trigger="None" shown="autoFocus">
    <form>
        <h4 class="modal-header">
            Edit Account
            <button type="button" tabindex="-1" class="close wj-hide">×</button>
        </h4>
        <div class="modal-body">
            <label>
                Email:
                <input class="form-control" required="" type="email">
            </label>
            <br>
            <label>
                Current Password:
                <input class="form-control" type="password" required="" pattern=".{4,}" title="Please enter 4 characters or more.">
            </label>
            <br>
            <label>
                New Name:
                <input class="form-control" pattern=".{2,}" title="Please enter 2 characters or more.">
            </label>
            <br>
            <label>
                New Password:
                <input class="form-control" type="password" id="editPwd1" pattern=".{4,}" title="Please enter 4 characters or more.">
            </label>
            <br>
            <label>
                Confirm New Password:
                <input class="form-control" type="password" id="editPwd2" pattern=".{4,}" title="Please enter 4 characters or more.">
            </label>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="submit" onclick="checkEdit()">
                Update Account
            </button>
        </div>
    </form>
</c1-popup>

<button class="btn btn-default" onclick="showPopup('login')">Log In</button>
<button class="btn btn-default" onclick="showPopup('create')">Create Account</button>
<button class="btn btn-default" onclick="showPopup('edit')">Edit Account</button><br />
<label>Modal <input type="checkbox" id="modal" checked="checked" onchange="changeModal()" /></label>

@section Description{
    Dialogs are Popups with no owner element. They must be shown by calling the show method.<br />
    Dialogs can be modal or modeless. Modal dialogs have a dark backdrop, and if their hide-trigger attribute is set to None, they cannot lose focus and must be dismissed by the user, either by pressing escape or by clicking an element on the dialog itself.
}
