<orchestra-project-folder></orchestra-project-folder>

<section class="section-panel">
  <div class="container-fluid">
    <div class="row section-header">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div ng-if="!taskAssignment.is_reviewer">
          <h3>Take and upload photos for the article</h3>
        </div>
        <div ng-if="taskAssignment.is_reviewer">
          <h3>Review the article photos</h3>
        </div>
      </div>
    </div>

    <!-- Titles for the two columns -->
    <div class="row padded">
      <div class="col-lg4 col-md-4 col-sm-4">
        <h3>Editor's story plan</h3>
      </div>

      <div class="col-lg-8 col-md-8 col-sm-8">
        <h3>Photographer instructions</h3>
      </div>

    </div>

    <div class="row padded">

      <!-- Form with Editor's story plan -->
      <div class="col-lg-4 col-md-4 col-sm-4">
        <form class="form-horizontal text-right">

          <!-- Who was involved in the story -->
          <div class="form-group">
            <label for="whoInput" class="col-sm-2 col-md-2 col-lg-2 control-label text-right">Who</label>
            <div class="col-sm-10 col-md-10 col-lg-10">
              <input type="text" class="form-control" id="whoInput" value="{{who}}" disabled/>
            </div>
          </div>

          <!-- What happened in the story -->
          <div class="form-group">
            <label for="whatInput" class="col-sm-2 col-md-2 col-lg-2 control-label text-right">What</label>
            <div class="col-sm-10 col-md-10 col-lg-10">
              <input type="text" class="form-control" id="whatInput" value="{{what}}" disabled/>
            </div>
          </div>

          <!-- When the story occurred -->
          <div class="form-group">
            <label for="whenInput" class="col-sm-2 col-md-2 col-lg-2 control-label text-right">When</label>
            <div class="col-sm-10 col-md-10 col-lg-10">
              <input type="text" class="form-control" id="whenInput" value="{{when}}" disabled/>
            </div>
          </div>

          <!-- Where the story occurred -->
          <div class="form-group">
            <label for="whereInput" class="col-sm-2 col-md-2 col-lg-2 control-label text-right">Where</label>
            <div class="col-sm-10 col-md-10 col-lg-10">
              <input type="text" class="form-control" id="whereInput" value="{{where}}" disabled/>
            </div>
          </div>

          <!-- Other notes -->
          <div class="form-group">
            <label for="notesInput" class="col-sm-2 col-md-2 col-lg-2 control-label text-right">Notes</label>
            <div class="col-sm-10 col-md-10 col-lg-10">
              <textarea class="form-control" id="notesInput" rows="5" disabled>{{notes}}</textarea>
            </div>
          </div>

        </form>
      </div>

      <!-- Instructions for the photographer. -->
      <div ng-if="!taskAssignment.is_reviewer">
        <div class="col-lg-8 col-md-8 col-sm-8">
          <p>
            Read the editor's notes carefully, then take photographs that will go
            well with the article. When you are finished, upload the photographs
            to the "Raw Photos" subfolder of the "Project Drive Folder" above.
          </p>
        </div>
      </div>
      <div ng-if="taskAssignment.is_reviewer">
        <div class="col-lg-8 col-md-8 col-sm-8">
          <p>
            Review the photographs in the "Raw Photos" subfolder of the
            "Project Drive Folder" above. Feel free to take new photos,
            modify existing photos, or provide suggestions and feedback for
            the original photographer as needed.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
