{{partial "settings/header"}}

<div class="row-fluid">
  <div class="span4">
    <label for="outcome_section_select" class="text-right-responsive">
      {{#t 'select_a_section'}}Select a section{{/t}}
    </label>
  </div>
  <div class="span8">
    {{
      fast-select
      id="outcome_section_select"
      class="section_select"
      items=sections
      valuePath="id"
      labelPath="name"
      labelDefault=sectionSelectDefaultLabel
      selected=selectedSection
    }}
  </div>
</div>

<div class="row-fluid">
  <div class="span4"></div>
  <div class="span8">
    <div class="checkbox">
      <label class="checkbox">
        {{
          input
          type="checkbox"
          id="outcome_hide_names_checkbox"
          name="hide_names_checkbox"
          checked=hideStudentNames
        }}
        {{#t "hide_student_names_label"}}Hide Student Names{{/t}}
      </label>
    </div>
  </div>
</div>

<div class="row-fluid">
  <div class="span4">
    {{!-- Intentionally left empty so this scales to smaller screens --}}
  </div>
  <div class="span8">
    <div class="pad-box bottom-only">
      <a class="btn" role="button" href="{{ unbound downloadOutcomeCsvUrl }}">
        <i class="icon-download"></i> {{#t 'download_results'}}Download Results (.csv){{/t}}
      </a>
    </div>
  </div>
</div>

<div class="hr"></div>

{{partial "content_selection/header"}}

<div class="row-fluid pad-box bottom-only">
  <div class="span4 text-right-responsive">
    <label for="outcome_student_select">
      {{#t 'select_student'}}Select a student{{/t}}
    </label>
  </div>


  <div class="span8">
    {{
      fast-select id="outcome_student_select"
      class="student_select"
      items=studentsInSelectedSection
      valuePath="id"
      labelPath=displayName
      labelDefault=studentSelectDefaultLabel
      selected=selectedStudent
    }}

    {{view App.SelectionButtonsView
      type='student'
      selected=selectedStudent
      list=studentsInSelectedSection
     }}

    </div>
  </div>
</div>



{{partial "content_selection/outcome"}}

<div class="hr"></div>

<div id="outcome_result">
  <div class="row-fluid">
    <div class="span4">
      <h2>{{#t 'result'}}Result{{/t}}</h2>
    </div>
    <div class= "span8 pad-box top-only">
      {{#if selectedOutcomeResult}}
        <div>
          <label for="outcome_result_value">
            <strong>{{#t 'result_for'}}Result for:{{/t}} {{selectedOutcome.title}}</strong>
          </label>
        </div>
        <div id="outcome_result_value">
          {{#if outcomeResultIsDefined}}
            {{#with selectedOutcomeResult}}
              <p>{{#t}}Current Mastery Score: {{score}} out of {{mastery_points}}{{/t}}</p>
            {{/with}}
          {{else}}
            -
          {{/if}}
        </div>
      {{else}}
        <p class="submission_selection">
          {{#t "empty_submission_selection"}}Select a student and an outcome to view results.{{/t}}
        </p>
      {{/if}}
    </div>
  </div>
</div>

<div class="hr"></div>

<div id="outcome_student_information">
  <div class="row-fluid">
    <div class="span4">
      <h2>{{#t 'student_info'}}Student Information{{/t}}</h2>
    </div>
    <div class="span8">
      {{#if selectedStudent}}
        <h3 class="student_selection">
          {{#if hideStudentNames}}
            {{selectedStudent.hiddenName}}
          {{else}}
          <a {{bind-attr href="studentUrl"}}>
            {{selectedStudent.name}}
          </a>
          {{/if}}
        </h3>
        {{#if selectedStudent.isLoaded}}
          {{partial "student_information/details"}}
        {{else}}
          <p>{{#t 'results_loading'}}Results for this student are still loading...{{/t}}</p>
        {{/if}}
      {{else}}
        <p class="student_selection pad-box top-only">
          {{#t "empty_student_selection"}}Select a student to view additional information here.{{/t}}
        </p>
      {{/if}}
    </div>
  </div>
</div>

<div class="hr"></div>

{{partial 'outcome_information'}}
