Prayer Journal Cards Sample

gistfile1.html

<div class="text-center" rn-carousel-indicators ng-if="prayers.length > 1" slides="prayers" rn-carousel-index="Id"></div>

<ul class="prayer-carousel" rn-carousel rn-carousel-controls rn-carousel-index="Id">
   <li ng-repeat="prayer in prayers track by prayer.Id">
       <div class="card prayer-card">
           <h2>{{ prayer.Name }}</h2>

           <div class="card-divider prayer-stats">
               <span class="prayer-started">
                   Started: {{ prayer.StartedAt | date:'M/d/yyyy' }}
               </span>

               <span class="prayer-answered ng-hide" ng-show="prayer.answeredAt">
                   Answer: {{ prayer.AnsweredAt | date:'M/d/yyyy' }}
               </span>

               <span><br /><br /></span>

               <span class="ng=hide" ng-show="prayer.isPublic">
                   <i class="fi-web">&nbsp;</i> Prayer is public.<br />
               </span>

               <span class="ng-hide" ng-show="prayer.sharedGroupIds.length > 0">
                   <i class="fi-torsos-all">&nbsp;</i> Prayer is shared with {{ prayer.sharedGroupIds.length }} groups.<br />
                   <i class="fi-heart">&nbsp;</i>{{ prayer.PrayerCount }} people have prayed for this.
               </span>
           </div>

           <div class="card-section">
               <h3>Details</h3>
               <p>{{ prayer.Details }}</p>

               <h3>Notes</h3>
               <p>{{ prayer.Notes }}</p>
           </div>
       </div>
   </li>
</ul>