<div class="row">
    <div class="col-md-12">Bootstrap components written in pure AngularJS by the <a href="http://angular-ui.github.io/">AngularUI Team</a></div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="heading_a"><span class="heading_text">Accordion</span></div>
        <div class="sepH_b">
            <p>
                <button class="btn btn-default btn-xs" ng-click="status.open = !status.open">Toggle last panel</button>
                <button class="btn btn-default btn-xs" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
            </p>
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="oneAtATime">
                Open only one at a time
            </label>
        </div>
        <accordion close-others="oneAtATime">
            <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            This content is straight in the template.
            </accordion-group>
            <accordion-group heading="Dynamic Body Content">
                <p>The body of the accordion group grows to fit the contents</p>
                <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
            </accordion-group>
            <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                {{group.content}}
            </accordion-group>
            <accordion-group heading="Last Panel" is-open="status.open">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dicta dolorem iste necessitatibus nisi nobis non numquam, quidem sit tenetur. Assumenda iste iure magni minus nostrum odio odit sunt temporibus?
            </accordion-group>
        </accordion>
    </div>
    <div class="col-md-6">
        <div class="heading_a"><span class="heading_text">Alerts</span></div>
        <button class="btn btn-default btn-xs sepH_b" ng-click="addAlert()">Add Alert</button>
        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" ng:bind-html="alert.msg"></alert>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="heading_a"><span class="heading_text">Dropdowns</span></div>
        <p class="sepH_b">
            <a href class="btn btn-default btn-xs" ng-click="toggleDropdown($event)">Toggle button dropdown</a>
            <button type="button" class="btn btn-default btn-xs" ng-click="disabled = !disabled">Enable/Disable</button>
        </p>
        <div class="btn-group" dropdown is-open="status.isopen">
            <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> Button dropdown <span class="caret"></span> </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
        <div class="btn-group" dropdown>
            <button type="button" class="btn btn-danger">Action</button>
            <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
                <span class="caret"></span>
                <span class="sr-only">Split button!</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <div class="heading_a"><span class="heading_text">Modals</span></div>
        <button class="btn btn-sm btn-default" ng-click="modalOpen('sm')">Small</button>
        <button class="btn btn-sm btn-default" ng-click="modalOpen()">Regular</button>
        <button class="btn btn-sm btn-default" ng-click="modalOpen('lg')">Large</button>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading_a"><span class="heading_text">Pagination</span></div>
        <div class="row">
            <div class="col-md-6">
                <button class="btn btn-default btn-xs sepH_b" ng-click="setPage(3)">Set current page to: 3</button>
                <div><pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination></div>
                <div><pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination></div>
                <div><pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination></div>
                <div><pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination></div>
                <pre>The selected page no: {{currentPage}}</pre>
            </div>
            <div class="col-md-6">
                <div><pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination></div>
                <div><pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>
                <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="heading_a"><span class="heading_text">Tooltip</span></div>
                <div class="row sepH_b">
                    <div class="col-md-6"><input type="text" ng-model="dynamicTooltipText" class="form-control input-sm" placeholder="Tooltip Text"></div>
                    <div class="col-md-6"> <input type="text" ng-model="dynamicTooltip" class="form-control input-sm" placeholder="Tooltip Content"></div>
                </div>
                <p>
                    Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at <a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a> nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a> pharetra convallis posuere morbi leo urna, <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a> at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
                </p>
                <p> I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a></p>
                <form role="form">
                    <div class="form-group">
                        <label>Or use custom triggers, like focus:</label>
                        <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="top" class="form-control input-sm" />
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <div class="heading_a"><span class="heading_text">Popover</span></div>
                <button popover-placement="left" popover="On the Left!" class="btn btn-default">Left</button>
                <button popover-placement="top" popover="On the Top!" class="btn btn-default">Top</button>
                <button popover-placement="bottom" popover="On the Bottom!" class="btn btn-default">Bottom</button>
                <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="heading_a"><span class="heading_text">Tabs</span></div>
        <div class="row">
            <div class="col-md-6">
                <p class="sepH_b">
                    <button class="btn btn-default btn-xs" ng-click="tabs[0].active = true">Select second tab</button>
                    <button class="btn btn-default btn-xs" ng-click="tabs[1].active = true">Select third tab</button>
                    <button class="btn btn-default btn-xs" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
                </p>
                <tabset>
                    <tab heading="Static title">Static content</tab>
                    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
                        {{tab.content}}
                    </tab>
                    <tab ng-click="alertMe()">
                        <tab-heading>
                            <i class="glyphicon glyphicon-bell"></i> Alert!
                        </tab-heading>
                        I've got an HTML heading, and a select callback. Pretty cool!
                    </tab>
                </tabset>
            </div>
            <div class="col-md-6">
                <tabset justified="true">
                    <tab heading="Justified">Justified content</tab>
                    <tab heading="SJ">Short Labeled Justified content</tab>
                    <tab heading="Long Justified">Long Labeled Justified content</tab>
                </tabset>
            </div>
        </div>
    </div>
</div>