somatomap html

<div class='sotomatomap-report'>
  <div class='row'>
    <div class='logo'>
      <img src='https://dl.dropboxusercontent.com/u/26679490/somatomap-logo.png' />
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-12'>
      <h1>Trial Summary</h1>
    </div>
    <div class='col-sm-7'>
      <filters>
        <div class='row'>
          <div class='col-sm-4'>
            <report-field type='date' label='Start date' name='start_date'></report-field>
          </div>
          <div class='col-sm-4'>
            <report-field type='date' label='End date' name='end_date'></report-field>
          </div>
        </div>
        <div class='row'>
          <div class='col-sm-4'>
            <report-slider input-type='number' min-value='0' max-value='100' label='Mood min' name='mood_min'></report-slider>
          </div>
          <div class='col-sm-4'>
            <report-slider input-type='number' current-value='100' min-value='0' max-value='100' label='Mood max' name='mood_max'></report-slider>
          </div>
        </div>
        <div class='row'>
          <div class='col-sm-4'>
            <report-slider input-type='number' min-value='0' max-value='100' label='intensity min' name='intensity_min'></report-slider>
          </div>
          <div class='col-sm-4'>
            <report-slider input-type='number'  current-value='100' min-value='0' max-value='100' label='intensity max' name='intensity_max'></report-slider>
          </div>
        </div>
        <div class='row'>
          <div class='col-sm-4'>
            <report-slider input-type='number' min-value='0' max-value='10' label='discomfort min' name='pleasantness_min'></report-slider>
          </div>
          <div class='col-sm-4'>
            <report-slider input-type='number'  current-value='10' min-value='0' max-value='10' label='discomfort max' name='pleasantness_max'></report-slider>
          </div>
        </div>
      </filters>
      <report-data>
        <h2>Trials</h2>
        <accordion>
          <accordion-group heading="{{trial.date}} - {{trial.client_name}}" ng-repeat="trial in report.trials">
 
            <p><strong>date:</strong> {{trial.date}}</p>
            <p><strong>mood:</strong> {{trial.mood}}</p>
            <p><strong>mood intensity:</strong> {{trial.mood_intensity}}</p>
            <p><strong>client:</strong>  {{trial.client_name}}</p>
            <p><strong>description:</strong>  {{trial.description}}</p>
            <h5>TRIAL RATINGS</h5>
 
            <div class='thumb trial-thumb'>
              <img src='https://dl.dropboxusercontent.com/u/26679490/body.png'/>
              <div ng-repeat='rating in trial.ratings'>
                <uploaded-content src='{{rating.thumbnail}}'></uploaded-content>
              </div>
            </div>
            <div class='row' ng-repeat="rating in trial.ratings">
              <div class='col-sm-8'>
                <div class='rating'>
                  <p>intensity: {{rating.intensity}}</p>
                  <p>pleasantness: {{rating.pleasantness}}</p>
                  <div class='thumb rating-thumb'>
                    <img src='https://dl.dropboxusercontent.com/u/26679490/body.png'/>
                    <uploaded-content src='{{rating.thumbnail}}'></uploaded-content>
                  </div>
                </div>
              </div>
            </div>
          </accordion-group>
        </accordion>
      </report-data>
    </div>
    <div class='col-sm-5'>
      <heatmap src='https://dl.dropboxusercontent.com/u/26679490/body.png' mask='mask'></heatmap>
    </div>
  </div>
</div>