<!-- Journal Page
==========================================-->
<template name="archiveJournal">
  <div class="col-md-3 col-xs-3 col-sm-3">
    <div class="portlet box yellow">
      <div class="portlet-title">
        <div class="caption">
          <i class="fa fa-child"></i>
          <span class="caption-subject bold uppercase">Archive</span>
        </div>
      </div>
      <div class="portlet-body vertical-center">
        <div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12 col-lg-10 col-lg-offset-1">
          {{#if userPosts}} {{#each addIndex userPosts}}
          <h4 style="margin-left:-10px">
            <a data-toggle="collapse" data-parent="#accordion" href="#symptoms{{index}}" class="drop" id="drop{{index}}">
              <i class="fa fa-caret-right"></i>
            </a>
            <a href="/journal/{{value.year}}/{{value.month}}/all">{{monthYearDisplay value.month }} {{value.year}}</a>
          </h4>
          <div id="symptoms{{index}}" class="panel-collapse collapse">
            <div>
              {{#each value.dayposts}}
              <div><a href="/journal/{{dayPostLink this.timestamp}}">{{dateDisplay this.timestamp}}</a></div>
              {{/each}}
            </div>
          </div>
          {{/each}} {{else}} {{/if}}
        </div>
      </div>
    </div>




    <!-- <div class="col-md-3">
    <div class="row archiveBox">
      <div class="row col-md-offset-3 col-md-6 archiveheader">
        <span style="color:white;min-height: 20px;font-size:130%;text-align:center"> Archive </span>
      </div>
      <div class="archiveBody">
        <div class="panel-group" id="accordion">
          {{#if userPosts}} {{#each addIndex userPosts}}
          <div class="panel panel-default journal">
            <div class="panel-heading journal">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#symptoms{{index}}">
                  <i class="fa fa-arrow-down fa-1x"></i>
                </a>
                <a href="/journal/{{value.year}}/{{value.month}}/all">
                                            {{monthYearDisplay value.month }} {{value.year}}
                                        </a>
              </h4>
            </div>
            <div id="symptoms{{index}}" class="panel-collapse collapse in">
              <div class="panel-body">
                {{#each value.dayposts}}
                <p><a href="/journal/{{dayPostLink this.timestamp}}">{{dateDisplay this.timestamp}}</a></p>
                {{/each}}
              </div>
            </div>
          </div>
          {{/each}} {{else}} {{/if}}
        </div>
      </div>
    </div>-->
  </div>
</template>
<template name="viewJournal">
  {{>loggedInNavBar}}
  <div class="container-fluid">
    <div class="mDashboard">
      <!-- <div class="journalhead"> -->
      <!--<img src="/img/journalhead.png" align="left"/>-->

      <!-- </div> -->
      <div class="container" style="margin-top:5%">
        {{> yield region='archive'}} {{> yield region='body'}}
      </div>
    </div>
  </div>
</template>

<template name="eachPost">

  <div class="col-md-9 col-xs-9 col-sm-9">
    <div class="portlet box red">
      <div class="portlet-title">
        <div class="caption">
          <i class="fa fa-child"></i>
          <span class="caption-subject bold uppercase">Your Entries </span>
        </div>
      </div>
      <div class="portlet-body vertical-center"  >

        <div class="col-md-12" style="overflow:scroll;max-height:600px">
          <button type="button" class="btn blue" id="newEntry" style="float:right">CREATE ENTRY</button>
          {{#each this}} {{#each this.eachentry}}
          <div class="portlet gren">
            <div class="portlet-title">
              <div class="caption">
                <span class="caption-subject bold uppercase">{{eachPostDateDisplay this.date}}</span>
                <span class="caption-helper"> {{timeDisplay this.date}}
                  <input type="image" id="deletePost" value="{{this.date}}" img src="/img/trash.png">
                </span>
              </div>
            </div>
            <div class="portlet-body">
              <div>
                {{#if this.symptom}}
                <div class="col-md-12 postDiv">
                  <span class="postHead">Symptoms:</span>
                  <span class="postBody">{{symptomComma this.symptom}}</span>
                </div>
                {{/if}} {{#if this.mood}}
                <div class="col-md-12 postDiv">
                  <span class="postHead">Mood:</span>
                  <span class="postBody">{{this.mood}}</span>
                </div>
                {{/if}} {{#if this.weight}}
                <div class="col-md-12 postDiv">
                  <span class="postHead">Current weight:</span>
                  <span class="postBody">{{this.weight}} kg</span>
                </div>
                {{/if}} {{#if this.mood}}
                <div class="col-md-12 postDiv">
                  <span class="postHead">Current thoughts:</span>
                </div>
                <div class="col-md-12 postDiv">
                  <textarea id="maxlength_textarea" name="userthoughts" class="form-control" rows="2" >{{this.thoughts}}</textarea>
                </div>
                {{/if}}
              </div>

            </div>

          </div>
          {{/each}} {{/each}}
        </div>
      </div>

      <!--
            <div>
              <b style="font-size:200%;">{{eachPostDateDisplay this.timestamp}}</b> {{timeDisplay this.date}}
            </div> -->

    </div>
  </div>



  <!-- <div class="col-md-9">
    <div class="col-md-9">
    <div class="col-md-3">
      <button type="button" id="newEntry">CREATE ENTRY</button>
    </div> -->
  <!-- </div> -->
</template>

<template name="addPost">
  <div class="col-md-8 col-md-offset-2">
    <div class="portlet box blue">
      <div class="portlet-title">
        <div class="caption">
          <span class="caption-subject bold uppercase">Create Entry</span>
        </div>
      </div>
      <div class="portlet-body form">
        <form id="entry" class="form-horizontal">
          <div class="form-body">
            <div class="form-group">

              <label class="col-md-3 control-label">Select date</label>
              <div class="col-md-6">
                <div class="input-group datetimepicker">
                  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                  <input class="set-due-date date form-control" type="text" name="date" />
                </div>
                <!-- <input class="form-control form-control-inline input-medium datetimepicker set-due-date" size="16" type="text"> -->
                <span class="help-block">
                  Select date </span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label">Weight</label>
              <div class="col-md-9">
                <input name="weight" type="number" required>
                <span class="help-block">A block of help text. </span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label">Symptoms</label>
              <div class="col-md-9">
                <select class="js-example-basic-multiple" id="allSymptoms" multiple="multiple" style="width: 75%">
                  {{#each symptoms}}
                  <option name="affliction" value="{{this}}">{{this}}</option>
                  <!-- <input name="affliction" type="checkbox" value="{{this}}"> {{this}} -->
                  {{/each}}
                </select>
                <span class="help-block">A block of help text. </span>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label">How are you feeling</label>
              <div class="col-md-9">
                <select class="js-example-basic-single" id="allMoods" style="width: 75%">
                  {{#each moods}}
                  <option name="face" value="{{this}}">{{this}}</option>
                  {{/each}}
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label">Your Thoughts Here</label>
              <div class="col-md-9">
                <textarea id="maxlength_textarea" name="userthoughts" class="form-control" maxlength="225" rows="2" placeholder="Document anything here!"></textarea>
              </div>
            </div>
            {{#if getAddPostError}}
            <div class="errorMsg">{{getAddPostError}}</div>
            {{/if}}
          </div>
          <div class="form-actions">
            <input type="submit" class="btn blue" value="Submit" style="float:right;margin-left:5px">
            <input type="button" class="btn btn-default" id="cancelPost" value="Cancel" style="float:right">
          </div>
        </form>
      </div>
    </div>
  </div>
</template>