<div class="main-section-header">
  <div class="container">
    <div class="row">
      <pageheader headertitle="{{$ctrl.project().name}}" 
        buttonlabel="goals_button"
        buttonfunction="$ctrl.goals()" buttonshow="!$ctrl.showMotivational" buttonstyle="primary"
        button2label="jsp.common.button.back"
        button2function="$ctrl.back()" button2show="true" button2style="default" button2hotkey="$ctrl.hotkeys"
        button2tooltip="{{'back_button_tooltip'+$root.os}}"
        tipcode="backupTip" tipenabled="!$ctrl.showMotivational" 
        dropdownopen="down" dropdownitems="$ctrl.actionitems">
      </pageheader>
    </div>
  </div>
</div>
<div class="project-home-container">
  <div class="container">
    <div class="row" ng-if="$ctrl.showMotivational">
      <div class="col-sm-9 col-sm-offset-1">
        <div class="jumbotron top50">
          <div class="project-motivational">
            <h1>{{"jsp.project.h1" | translate}}</h1>
            <p>
              <button ng-click="$ctrl.showTips()" type="button"
                class="btn btn-primary">{{"jsp.project.button.bibiscoProjectSuggestions" | translate}}</button>
                <button buttonshow="$ctrl.showMotivational" ng-click="$ctrl.goals()" type="button"
                class="btn btn-default">{{"goals_button" | translate}}</button>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="project-stats-table" ng-if="!$ctrl.showMotivational">
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
          <table class="table">
            <tbody>
              <tr>
                <td class="col-sm-5 text-right">
                  <span class="project-stats-item">{{"common_words" | translate}}</span><span class="project-stats-number text-primary">{{($ctrl.wordsTotal | number: 0)}}</span>
                </td>
                <td class="col-sm-7 text-left">
                    <span class="project-stats-detail-number">{{($ctrl.charactersTotal | number: 0)}}</span> {{"jsp.common.span.characters" | translate}}, <a ng-click="$ctrl.wordsWrittenHistory()">{{"goals_show_history" | translate}}</a>. 
                </td>
              </tr>
              <tr ng-if="$ctrl.wordsGoal && $ctrl.supporterEdition">
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{"goals_total_words_goal" | translate}}</span><span class="project-stats-number text-primary">{{($ctrl.wordsGoal | number: 0)}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <div class="progress project-stats-progress">
                        <div class="progress-bar" 
                          ng-class="{ 'progress-bar-success' : $ctrl.wordsGoalPerc >= 100,
                                      'progress-bar-warning' : $ctrl.wordsGoalPerc > 74 && $ctrl.wordsGoalPerc < 100,
                                      'progress-bar-danger' : $ctrl.wordsGoalPerc < 75}"
                          ng-style="{ 'width': '{{$ctrl.wordsGoalPerc}}%' }">
                        </div>
                      </div>
                      <div>
                        <span class="project-stats-detail-number">{{$ctrl.wordsGoalPerc}}%</span> {{"goals_perc_of_the_goal" | translate}}, <span class="project-stats-detail-number">{{($ctrl.wordsRemaining | number: 0)}}</span> {{"goals_words_left" | translate}}
                      </div> 
                    </td>
              </tr>
              <tr ng-if="$ctrl.wordsPerDayGoal && $ctrl.supporterEdition">
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{"goals_words_per_day_goal" | translate}}</span><span class="project-stats-number text-primary">{{($ctrl.wordsPerDayGoal | number: 0)}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                    <span class="project-stats-detail-number">{{($ctrl.wordsWrittenToday | number: 0)}}</span> {{"goals_words_written_today" | translate}}, <span class="project-stats-detail-number">{{($ctrl.wordsWrittenYesterday | number: 0)}}</span> {{"goals_words_written_yesterday" | translate}}, <span class="project-stats-detail-number">{{($ctrl.averageLastSevenDays | number: 0)}}</span> {{"goals_words_written_average_last_7_days" | translate}}, <a ng-click="$ctrl.wordsWrittenHistory()">{{"goals_show_history" | translate}}</a>. 
                  </td>
              </tr>
              <tr ng-if="$ctrl.deadline && $ctrl.supporterEdition">
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{"goals_deadline" | translate}}</span><span class="project-stats-number text-primary">{{'date_format' | translate:{date:$ctrl.deadline} }}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                    <span class="project-stats-detail-number">{{($ctrl.daysLeft | number: 0)}}</span> {{"goals_days_left" | translate}}
                  </td>
              </tr>
              <tr>
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'common_strands_low' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.narrativeStrands}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                      completed="$ctrl.narrativeStrandsCompleted",
                      tocomplete="$ctrl.narrativeStrandsTocomplete",
                      todo="$ctrl.narrativeStrandsTodo",
                      total="$ctrl.narrativeStrands">
                    </progressstatsbar>  
                  </td>
              </tr>
              <tr>
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'jsp.menu.chapters' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.chapters}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                      completed="$ctrl.chaptersCompleted",
                      tocomplete="$ctrl.chaptersTocomplete",
                      todo="$ctrl.chaptersTodo",
                      total="$ctrl.chapters">
                    </progressstatsbar>  
                  </td>
              </tr>
              <tr>
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'common_scenes_low' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.scenes}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                      completed="$ctrl.scenesCompleted",
                      tocomplete="$ctrl.scenesTocomplete",
                      todo="$ctrl.scenesTodo",
                      total="$ctrl.scenes">
                    </progressstatsbar>  
                  </td>
              </tr>
              <tr>
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'common_main_characters_low' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.mainCharacters}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                      completed="$ctrl.mainCharactersCompleted",
                      tocomplete="$ctrl.mainCharactersTocomplete",
                      todo="$ctrl.mainCharactersTodo",
                      total="$ctrl.mainCharacters">
                    </progressstatsbar>
                  </td>
              </tr>
              <tr>
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'common_secondary_characters_low' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.secondaryCharacters}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                      completed="$ctrl.secondaryCharactersCompleted",
                      tocomplete="$ctrl.secondaryCharactersTocomplete",
                      todo="$ctrl.secondaryCharactersTodo",
                      total="$ctrl.secondaryCharacters">
                    </progressstatsbar>
                  </td>
              </tr>
              <tr>
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'jsp.menu.locations' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.locations}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                        completed="$ctrl.locationsCompleted",
                        tocomplete="$ctrl.locationsTocomplete",
                        todo="$ctrl.locationsTodo",
                        total="$ctrl.locations">
                      </progressstatsbar>
                  </td>
              </tr>
              <tr ng-if="$ctrl.supporterEdition">
                  <td class="col-sm-5 text-right">
                      <span class="project-stats-item">{{'jsp.menu.objects' | translate}}</span><span class="project-stats-number text-primary">{{$ctrl.objects}}</span>
                  </td>
                  <td class="col-sm-7 text-left">
                      <progressstatsbar 
                      completed="$ctrl.objectsCompleted",
                      tocomplete="$ctrl.objectsTocomplete",
                      todo="$ctrl.objectsTodo",
                      total="$ctrl.objects">
                    </progressstatsbar>
                  </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>