<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li>UI Components</li>
	<li class="active">Ratings</li>
</ol>

<div class="container-fluid">

<div class="row">

    <div class="col-md-12" ng-controller="RatingsDemoController">
          <tabset panel-tabs="true" panel-class="panel-info" heading="Ratings">
            <tab>
              <tab-heading><i class="fa fa-desktop"></i></tab-heading>

                <p>Rating directive that will take care of visualising a star rating bar.</p>

                <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" class="rating"></rating>
                <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

                <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>

                <button class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
                <button class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
                <hr />

                <h4>Custom icons</h4>
                <div ng-init="x = 5" class="mb10"><rating class="rating" ng-model="x" max="15" state-on="'fa-check-circle'" state-off="'fa-check-circle-o'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
                <div ng-init="y = 2"><rating class="rating" ng-model="y" rating-states="ratingStates"></rating> <b>(<i>Rate:</i> {{y}})</b></div>

          </tab>
          <tab>
              <tab-heading><i class="fa fa-code"></i></tab-heading>
              <p>Ratings are created using the <code>rating</code> element like below:</p>
<pre class="prettyprint">
&lt;div ng-init=&quot;x = 5&quot; class=&quot;mb10&quot;&gt;&lt;rating class=&quot;rating&quot; ng-model=&quot;x&quot; max=&quot;15&quot; state-on=&quot;&#039;fa-check-circle&#039;&quot; state-off=&quot;&#039;fa-check-circle-o&#039;&quot;&gt;&lt;/rating&gt; &lt;b&gt;(&lt;i&gt;Rate:&lt;/i&gt; {{x}})&lt;/b&gt;&lt;/div&gt;
</pre>
<div ng-init="x = 5" class="mb10"><rating class="rating" ng-model="x" max="15" state-on="'fa-check-circle'" state-off="'fa-check-circle-o'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
<br><p><span class="label label-primary">NOTE</span> No JS used!</p>
        	</tab>
    	</tabset>

    </div>

</div>

</div> <!-- container-fluid -->
