{{#crud-form
  changesets=changesets
  onSave=(action onSave)
  onCancel=(action onCancel) as |f|
}}
  <div class="row">
    <div class="col-md-4">
      <div class="well">
        {{#f.content class='form'}}
          {{#with changesets.model as |changeset|}}
            {{#validated-field property='project' label='Project' changeset=changeset}}
              {{#power-select
                options=options.projects
                selected=changeset.project
                onchange=(action (mut changeset.project))
                searchField='name'
                as |project|
              }}
                {{project.name}}
              {{/power-select}}
            {{/validated-field}}

            {{#validated-field property='adfgPermit' label='ADFG Permit' changeset=changeset}}
              {{#power-select-with-create
                options=options.adfgPermits
                selected=changeset.adfgPermit
                onchange=(action (mut changeset.adfgPermit))
                oncreate=(action 'addOption' 'adfg-permit' 'adfgPermits' 'adfgPermit' 'name')
                searchField='name'
                as |adfgPermit term|
              }}
                {{adfgPermit.name}}
              {{/power-select-with-create}}
            {{/validated-field}}

            {{#validated-field property='studyLocation' changeset=changeset}}
              <label class="control-label">
                Study location
                <a href="{{newStudyLocationAdmin}}" target="_blank">+</a>
              </label>
              {{#power-select
                search=(action 'searchStudyLocation')
                options=options.studyLocations
                selected=changeset.studyLocation
                onchange=(action (mut changeset.studyLocation))
                searchField='code'
                as |studyLocation|
              }}
                {{studyLocation.code}}
              {{/power-select}}
            {{/validated-field}}

            {{#validated-field property='collectionType' label='Collection type' changeset=changeset}}
                {{#power-select
                  options=options.collectionTypes
                  selected=changeset.collectionType
                  onchange=(action (mut changeset.collectionType))
                  searchField='name'
                  as |collectionType|
                }}
                  {{collectionType.name}}
                {{/power-select}}
            {{/validated-field}}

            {{#validated-field property='collectionMethod' label='Collection method' changeset=changeset}}
              {{#power-select
                options=options.collectionMethods
                selected=changeset.collectionMethod
                onchange=(action (mut changeset.collectionMethod))
                searchField='name'
                as |collectionMethod|
              }}
                {{collectionMethod.name}}
              {{/power-select}}
            {{/validated-field}}

            {{#validated-field property='numberOfTraps' label='Number of traps' changeset=changeset}}
              {{input value=changeset.numberOfTraps type='number' class='form-control'}}
            {{/validated-field}}

            {{#validated-field property='collectionStartDate' label='Collection start date' changeset=changeset}}
              {{input value=changeset.collectionStartDate type='date' class='form-control'}}
            {{/validated-field}}

            {{#validated-field property='collectionStartTime' label='Collection start time' changeset=changeset}}
              {{input value=changeset.collectionStartTime type='time' class='form-control'}}
            {{/validated-field}}

            {{#validated-field property='collectionEndDate' label='Collection end date' changeset=changeset}}
              {{input value=changeset.collectionEndDate type='date' class='form-control'}}
            {{/validated-field}}

            {{#validated-field property='collectionEndTime' label='Collection end time' changeset=changeset}}
              {{input value=changeset.collectionEndTime type='time' class='form-control'}}
            {{/validated-field}}
          {{/with}}
        {{/f.content}}
      </div>
    </div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12">
          {{#validated-field property='notes' label='Notes' changeset=changesets.model}}
            {{textarea value=changesets.model.notes class='form-control'}}
          {{/validated-field}}
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table">
            <caption>
              Species / Count Info
              {{action-button isSuccess=true isXSmall=true label='+' onClick=(action 'addHasMany' 'collection-species' 'collectionSpecies')}}
            </caption>
            <thead>
              <tr>
                <th class="col-md-3">Species</th>
                <th class="col-md-3">Count</th>
                <th class="col-md-3">Count Estimated</th>
                <th class="col-md-3">Sex</th>
                <th class="col-md-1">Delete</th>
              </tr>
            </thead>
            <tbody>
              {{#each changesets.hasMany.collectionSpecies as |cs|}}
                <tr class="form">
                  <td class="col-md-3">
                    {{#validated-field property='species' changeset=cs.changeset}}
                      {{#power-select
                        options=options.species
                        selected=cs.changeset.species
                        onchange=(action (mut cs.changeset.species))
                        searchField='commonName'
                        as |species|
                      }}
                        {{species.commonName}}
                      {{/power-select}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-3">
                    {{#validated-field property='count' changeset=cs.changeset}}
                      {{input value=cs.changeset.count}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-3">
                    {{#validated-field property='countEstimated' changeset=cs.changeset}}
                      {{input checked=cs.changeset.countEstimated type='checkbox'}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-3">
                    {{#validated-field property='sex' changeset=cs.changeset}}
                      {{#power-select
                        options=options.sexes
                        selected=cs.changeset.sex
                        onchange=(action (mut cs.changeset.sex))
                        searchField='name'
                        as |sex|
                      }}
                        {{sex.name}}
                      {{/power-select}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-2">
                    {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteHasMany' cs 'collectionSpecies')}}
                  </td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table">
            <caption>
              Environmental Measurements
              {{action-button isSuccess=true isXSmall=true label='+' onClick=(action 'addHasMany' 'collection-measurement' 'envMeasurements')}}
            </caption>
            <thead>
              <tr>
                <th class="col-md-3">Date Measured</th>
                <th class="col-md-3">Time Measured</th>
                <th class="col-md-3">Water Temperature (deg C)</th>
                <th class="col-md-3">Air Temperature (deg C)</th>
                <th class="col-md-1">Delete</th>
              </tr>
            </thead>
            <tbody>
              {{#each changesets.hasMany.envMeasurements as |cm|}}
                <tr class="form">
                  <td class="col-md-3">
                    {{#validated-field property='dateMeasured' changeset=cm.changeset}}
                      {{input value=cm.changeset.dateMeasured type='date' class='form-control'}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-3">
                    {{#validated-field property='timeMeasured' changeset=cm.changeset}}
                      {{input value=cm.changeset.timeMeasured type='time' class='form-control'}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-3">
                    {{#validated-field property='waterTempC' changeset=cm.changeset}}
                      {{input value=cm.changeset.waterTempC class='form-control'}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-3">
                    {{#validated-field property='airTempC' changeset=cm.changeset}}
                      {{input value=cm.changeset.airTempC class='form-control'}}
                    {{/validated-field}}
                  </td>
                  <td class="col-md-2">
                    {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteHasMany' cm 'envMeasurements')}}
                  </td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <form enctype="multipart/form-data">
            <table class="table">
              <caption>
                Attachments
                {{action-button isSuccess=true isXSmall=true label='+' onClick=(action 'addHasMany' 'datasheet-attachment' 'datasheets')}}
              </caption>
              <thead>
                <tr>
                  <th>File</th>
                  <th>Delete</th>
                </tr>
              </thead>
              <tbody>
                {{#each changesets.hasMany.datasheets as |d|}}
                  <tr class="form">
                    <td>
                      {{#if d.model.isNew}}
                        {{#validated-field property='datasheet' changeset=d.changeset}}
                          <input type="file" onchange={{action 'updateDatasheet' d.changeset}} accept="image/png,image/jpeg,application/pdf">
                        {{/validated-field}}
                      {{else}}
                        <a href="{{ d.model.datasheet }}">{{ d.model.datasheet }}</a>
                      {{/if}}
                    </td>
                    <td>
                      {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteHasMany' d 'datasheets')}}
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
  {{f.save}} {{f.cancel}}
{{/crud-form}}