<ion-view view-title="Mood">
  <ion-content>





      <div class="list card">

        <center><h2>Words of the Day</h2></center>
        <ion-slide-box delegate-handle="articleSlideBox" ng-hide="data==null">
              <ion-slide ng-repeat="quote in quotes" ng-init="initQuo()">

              <div class="item item-text-wrap">
                <p><strong>"{{quote.cite}}"</strong></p>
                                <p>{{quote.progenitor}}</p>
                <br>
              </div>

              </ion-slide>
        </ion-slide-box>

      </div>






<!--

        <ion-list>
          <div class="item">
           <h2>Articles</h2>
          </div>
          <ion-item ng-repeat="n in articles">
            <div class="item">
               <h2>{{n.title}}</h2>
            </div>
          </ion-item>

            <div class="item item-body">
              <h2>Quotes</h2>
            </div>
            <ion-item ng-repeat="quote in quotes">
            <div class="item">
               <h2>{{quote.cite}}</h2>
            </div>
          </ion-item>
        </ion-list>
-->



<script id="modal.html" type="text/ng-template">
    <div class="modal">
        <ion-header-bar class="bar bar-header bar-keepAppy">
            <h1 class="title" style="color:#FFFFFF">{{title}}</h1>
            <button class="button button-clear button-primary" style="color:#E7E7E7" ng-click="closeModal(1)">Cancel</button>
        </ion-header-bar>
        <ion-content>
            <div class="padding">



            <ion-slide-box delegate-handle="questionSlideBox" ng-init="lockSlide()" ng-hide="data==null">
              <ion-slide ng-repeat="question in data.questions" ng-init="init()" name="slideBox">

              <div class="item item-text-wrap">
                <p><strong>{{question.question}}</strong></p>
              </div>

              <div class="item range" name="slideInput">

                <i style="color:#ff6666" class="icon ion-thumbsdown"></i>
                <input type="range" id="range{{$index}}" min="0" max="100" step="10" snaps="true" ng-model="data.mood" ng-model-options="{ getterSetter: true }">
                <i style="color:#66b266" class="icon ion-thumbsup"></i>

              </div>
              <br>
              <div class="item">
                <center>
                <button ng-if="!$first" class="button button-outline button-calm" ng-click="previousSlide()">Previous</button>
                <button class="button button-outline button-positive" ng-click="nextSlide()">Next</button>
                </center>
              </div>
              <br>

              </ion-slide>

            </ion-slide-box>

            </div>
        </ion-content>
    </div>
  </script>



  <script id="artDetail.html" type="text/ng-template">
    <div class="modal">
        <ion-header-bar class="bar bar-header bar-positive">
            <h1 class="title">{{article.title}}</h1>
            <button class="button button-clear button-primary" ng-click="closeModal(2)">Cancel</button>
        </ion-header-bar>
        <ion-content>
            <div class="padding">
                <div class="textArea">
                                        <img class="full-image" src="https://sheltered-beach-51587.herokuapp.com{{article.image_url}}">
                    <p>{{article.content}}</p>
                </div>
            </div>
        </ion-content>
    </div>
  </script>




  </ion-content>
</ion-view>