<div class="page page-modals">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">UI Kit</a>
        </li>
        <li>
          <a ui-sref="app.ui.modals">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">


    <!-- row -->
    <div class="row">

      <!-- col -->
      <div class="col-md-12">




        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen01">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Default</strong> Modals</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen01 = !isFullscreen01">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body">

            <div ng-controller="ModalDemoCtrl">

              <script type="text/ng-template" id="myModalContent.html">
                <div class="modal-header">
                  <h3 class="modal-title custom-font">I'm a modal!</h3>
                </div>
                <div class="modal-body">
                  <ul>
                    <li ng-repeat="item in items">
                      <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                  </ul>
                  Selected: <b>{{ selected.item }}</b>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success btn-ef btn-ef-3 btn-ef-3c" ng-click="ok()"><i class="fa fa-arrow-right"></i> Submit</button>
                  <button class="btn btn-lightred btn-ef btn-ef-4 btn-ef-4c" ng-click="cancel()"><i class="fa fa-arrow-left"></i> Cancel</button>
                </div>
              </script>

              <button class="btn btn-default" ng-click="open()">Open me!</button>
              <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
              <button class="btn btn-default" ng-click="open('sm')">Small modal</button>

              <div ng-show="selected">Selection from a modal: {{ selected }}</div>

            </div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->




        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen02">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Custom </strong>Modals</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen02 = !isFullscreen02">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="SplashDemoCtrl">

            <script type="text/ng-template" id="mySplashContent.html">
              <div class="modal-header">
                <h3 class="modal-title custom-font">I'm a modal!</h3>
              </div>
              <div class="modal-body">

                <p>This sure is a fine modal, isn't it?</p>

                <ul>
                  <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                  </li>
                </ul>

                Selected: <b>{{ selected.item }}</b>

              </div>
              <div class="modal-footer">
                <button class="btn btn-default btn-border" ng-click="ok()">Submit</button>
                <button class="btn btn-default btn-border" ng-click="cancel()">Cancel</button>
              </div>
            </script>

            <div class="row">
              <div class="col-md-4">
                <h5 class="custom-font"><strong>Fade and Slide</strong> effects</h5>
                <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-1 splash-ef-1">Default Splash</button>
                <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-primary splash-ef-2">Fade in &amp; Scale</button>
                <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-ef-3">Slide in (right)</button>
                <button class="btn btn-success mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-4">Slide in (bottom)</button>
              </div>

              <div class="col-md-4">
                <h5 class="custom-font"><strong>Flip and Rotate</strong> effects</h5>
                <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-9">3D Flip (horizontal)</button>
                <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-10">3D Flip (vertical)</button>
                <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-11">3D Sign</button>
                <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-14">3D Slit</button>
                <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-15">3D Rotate Bottom</button>
                <button class="btn btn-primary mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-16">3D Rotate In Left</button>
              </div>

              <div class="col-md-4">
                <h5 class="custom-font"><strong>Other</strong> effects</h5>
                <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-5">Newspaper</button>
                <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-6">Fall</button>
                <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-7">Side Fall</button>
                <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-8">Sticky Up</button>
                <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-ef-12">Super Scaled</button>
                <button class="btn btn-warning mb-10" ng-click="openSplash($event)" data-options="splash-2 splash-greensea splash-ef-13">Just Me</button>
              </div>
            </div>



            <div ng-show="selected">Selection from a modal: {{ selected }}</div>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



      </div>
      <!-- /col -->

    </div>
    <!-- /row -->



  </div>
  <!-- /page content -->




</div>
