<div class="ui container" id="event">

  <div class="ui stackable one column grid">
    <div class="column">

      <div class="ui card">

        <div class="content">
          <div class="header">{{ vm.event.attributes.title }}</div>
        </div><!-- header -->

        <div class="content">
          <h3>Organization: {{ vm.event.attributes.organization }}</h3>
          <div class="ui large feed">
            <div class="event">
              <div class="content">
                <div class="summary">
                  <span ng-if="vm.event.attributes.address != null">Location: {{ vm.event.attributes.address }}</span>
                  <span ng-if="vm.event.attributes.address == null">Location: N/A</span>
                  <br>
                  <span ng-if="vm.event.attributes.start != null">Start Date: {{ vm.event.attributes.start | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}</span>
                  <span ng-if="vm.event.attributes.start == null">Start Date: N/A</span>
                  <br>
                  <span ng-if="vm.event.attributes.end != null">End Date: {{ vm.event.attributes.end | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}</span>
                  <span ng-if="vm.event.attributes.end == null">End Date: N/A</span>
                  <br>
                  <h3>Information</h3>
                  Description:
                  <br>
                    <p ng-if="vm.event.attributes.description != null">{{ vm.event.attributes.description }}</p>
                    <p ng-if="vm.event.attributes.description == null">No description. Please visit the link for more details!</p>

                    <p ng-if="vm.event.attributes.age != null">Minimum Age: {{ vm.event.attributes.age }}</p>
                    <p ng-if="vm.event.attributes.age == null">Minimum Age: No age requirement!</p>

                    <p ng-if="vm.event.attributes.skills != null">Skills Needed: {{ vm.event.attributes.skills }}</p>
                    <p ng-if="vm.event.attributes.skills == null">Skills Needed: No skills required!</p>
                </div>
              </div>
            </div>
          </div>
        </div><!-- content -->


        <div class="ui positive right labeled icon button" ng-click="vm.hyperlink()">Volunteer Now <i class="checkmark icon"></i></div><!-- volunteer button -->


      </div><!-- card -->

      <br>

      <div class="ui card" id="comment">

        <comments></comments>

        <h3 class="form-header">Comments</h3>

        <div class="ui relaxed divided list">
          <div class="item" ng-repeat="comment in vm.comments">
            <div class="item">
              <div class="content">
                <div class="header">{{ comment.attributes.name }} says...</div>
                <div class="description">{{ comment.attributes.content }}</div>
              </div>
            </div>
          </div>
        </div>

      </div><!-- comments -->

    </div><!-- column -->
  </div><!-- grid -->

</div>
