<!-- MAIN CONTENT -->
<div id="content">
<div class="row">
    <big-breadcrumbs items="['Forms', 'Form Elements']" icon="table"
                     class="col-xs-12 col-sm-9 col-md-9 col-lg-9"></big-breadcrumbs>

    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
        <!-- Button trigger modal -->
        <a ng-click="openModal()" class="btn btn-success btn-lg pull-right header-btn hidden-mobile"><i
                class="fa fa-circle-arrow-up fa-lg"></i> Launch form modal</a>
    </div>
</div>


<div class="alert alert-block alert-success" dismisser>

    <h4 class="alert-heading"><i class="fa fa-check-square-o"></i> Check validation!</h4>

    <p>
        You may also check the form validation by clicking on the form action button. Please try and see the results
        below!
    </p>
</div>

<!-- widget grid -->

<section id="widget-grid" widget-grid>


<!-- START ROW -->

<div class="row">

<!-- NEW COL START -->
<article class="col-sm-12 col-md-12 col-lg-6">

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-1" data-widget-editbutton="false" data-widget-custombutton="false">
<!-- widget options:
    usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
    
    data-widget-colorbutton="false"	
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true" 
    data-widget-sortable="false"
    
-->
<header>
    <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

    <h2>Checkout Form </h2>

</header>

<!-- widget div-->
<div>


<!-- widget content -->
<div class="widget-body no-padding">

<smart-checkout-form></smart-checkout-form>

</div>
<!-- end widget content -->

</div>
<!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Registration form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">
            <smart-order-form></smart-order-form>
        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-7" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Review form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <smart-review-form></smart-review-form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

</article>
<!-- END COL -->

<!-- NEW COL START -->
<article class="col-sm-12 col-md-12 col-lg-6">

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-4" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Registration form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <smart-registration-form></smart-registration-form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-6" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Comment form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <smart-comment-form></smart-comment-form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->


<!-- Widget ID (each widget will need unique ID)-->
<div jarvis-widget id="wid-id-8" data-widget-editbutton="false" data-widget-custombutton="false">
    <!-- widget options:
        usage: <div jarvis-widget id="wid-id-0" data-widget-editbutton="false">
        
        data-widget-colorbutton="false"	
        data-widget-editbutton="false"
        data-widget-togglebutton="false"
        data-widget-deletebutton="false"
        data-widget-fullscreenbutton="false"
        data-widget-custombutton="false"
        data-widget-collapsed="true" 
        data-widget-sortable="false"
        
    -->
    <header>
        <span class="widget-icon"> <i class="fa fa-edit"></i> </span>

        <h2>Contacts form </h2>

    </header>

    <!-- widget div-->
    <div>


        <!-- widget content -->
        <div class="widget-body no-padding">

            <smart-contacts-form></smart-contacts-form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->


</article>
<!-- END COL -->

</div>

<!-- END ROW -->

</section>

<!-- end widget grid -->


<!-- Modal -->

<script type="text/ng-template" id="formLayoutsDemoModal.html">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <h4 class="modal-title">
            <img src="styles/img/logo.png" width="150" alt="SmartAdmin">
        </h4>
    </div>
    <div class="modal-body no-padding">

        <form id="login-form" class="smart-form">

            <fieldset>
                <section>
                    <div class="row">
                        <label class="label col col-2">Username</label>

                        <div class="col col-10">
                            <label class="input"> <i class="icon-append fa fa-user"></i>
                                <input type="email" name="email">
                            </label>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="row">
                        <label class="label col col-2">Password</label>

                        <div class="col col-10">
                            <label class="input"> <i class="icon-append fa fa-lock"></i>
                                <input type="password" name="password">
                            </label>

                            <div class="note">
                                <a href-void>Forgot password?</a>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <div class="row">
                        <div class="col col-2"></div>
                        <div class="col col-10">
                            <label class="checkbox">
                                <input type="checkbox" name="remember" checked="">
                                <i></i>Keep me logged in</label>
                        </div>
                    </div>
                </section>
            </fieldset>

            <footer>
                <button type="submit" class="btn btn-primary">
                    Sign in
                </button>
                <button type="button" class="btn btn-default" ng-click="closeModal()">
                    Cancel
                </button>

            </footer>
        </form>


    </div>
</script>


</div>
