<div>
    <div class="copy">
        <h3>
            Popup</h3>
        <p>
            The <a href="http://wijmo.com/5/docs/topic/wijmo.input.Popup.Class.html" 
            target="_blank">Popup</a> control can be used to display arbitrary
            content as dialogs (centered on the screen, without an owner element), or as
            'popovers' (located relative to an owner element).</p>

        <h4>
            Dialogs (Popups with no owner)</h4>
        <p>
            Dialogs are <b>Popups</b> with no owner element. They must be shown by calling the
            <b>show</b> method.</p>
        <p>
            Dialogs can be modal or modeless. Modal dialogs have a dark backdrop, and 
            if their <b>hideTrigger</b> property is set to <b>None</b>, they cannot
            lose focus and must be dismissed by the user, either by pressing escape
            or by clicking an element on the dialog itself.</p>
        <p>
            Notice how input elements automatically get the focus when the dialog is 
            displayed.</p>

        <!-- define dialogs -->
        <wj-popup class="col-md-6 modal-content" control="frmLogIn">
            <ng-include src="'partials/includes/frmLogIn.htm'"></ng-include>
        </wj-popup>
        <wj-popup class="col-md-6 modal-content" control="frmCreateAccount">
            <ng-include src="'partials/includes/frmCreateAccount.htm'"></ng-include>
        </wj-popup>
        <wj-popup class="col-md-6 modal-content" control="frmEditAccount">
            <ng-include src="'partials/includes/frmEditAccount.htm'"></ng-include>
        </wj-popup>

        <!-- buttons to show dialogs -->
        <button class="btn btn-default" ng-click="showDialog('frmLogIn')">log in</button>
        <button class="btn btn-default" ng-click="showDialog('frmCreateAccount')">create account</button>
        <button class="btn btn-default" ng-click="showDialog('frmEditAccount')">edit account</button>
        <br />
        <label>Modal <input type="checkbox" ng-model="modal" /></label>
        <br />

        <h4>
            Popovers (Popups with owner elements)</h4>
        <p>
            <b>Popups</b> may have owner elements that can be used to control their visibility.
            The <b>showTrigger</b> and <b>hideTrigger</b> properties determine whether the
            <b>Popups</b> should be shown or hidden when the owner element is clicked or when
            the popup loses the focus.</p>

        <!-- first element with popup -->
        <button id="btn1" type="button" class="btn btn-primary">
            Click to toggle Popup
            <br>
            <small>(showTrigger=hideTrigger=Click)</small>
        </button>
        <wj-popup class="popover" owner="#btn1" show-trigger="Click" hide-trigger="Click">
            <ng-include src="'partials/includes/popover.htm'"></ng-include>
        </wj-popup>

        <!-- second element with popup -->
        <button id="btn2" type="button" class="btn btn-primary">
            Click to show Popup
            <br>
            <small>(showTrigger=Click, hideTrigger=Blur)</small>
        </button>
        <wj-popup class="popover" owner="#btn2" show-trigger="Click" hide-trigger="Blur">
            <ng-include src="'partials/includes/popover.htm'"></ng-include>
        </wj-popup>

        <!-- third element with popup -->
        <button id="btn3" type="button" class="btn btn-primary">
            Click to show Popup form
            <br>
            <small>(showTrigger=Click, hideTrigger=None)</small>
        </button>
        <wj-popup class="popover" owner="#btn3" show-trigger="Click" hide-trigger="None">
            <ng-include src="'partials/includes/popoverForm.htm'"></ng-include>
        </wj-popup>

    </div>

</div>
