<div class="card -with-sidebar">
    <div class="card-content card-section -with-accordion">
        <form class="js-auto-save" action="action.php" method="POST">
            <div class="form-heading">
                <h3>Questionnaire</h3>
            </div>

            <div class="form-group">
                <div class="form-field question-field">
                    <label for="question-1">
				<span class="label">Enter a detailed description of the materials being used</span>

				<button type="button" class="btn btn-link js-btn-modal js-answers" data-modal="answers" data-module="animalCoversheets" data-record-id="testing">
					<i class="fa fa-list" aria-hidden="true"></i>

					<span class="link link-strong">Previous answers</span>
				</button>
			</label>

                    <textarea class="js-wysiwyg" name="question-1" id="question-1" rows="10"></textarea>
                </div>
            </div>

            <div class="modal modal-answers modal-advanced-search js-modal js-modal-exit -nav-padded -with-overlay" data-modal="answers">
                <div class="modal-inner inner">
                    <div class="modal-panel">
                        <div class="modal-header">
                            <button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
						<span class="fa fa-times"></span>
					</button>
                            <h3 class="modal-title">
                                <span class="text">Previous Answers</span>
                            </h3>
                        </div>

                        <div class="modal-section modal-question">
                            <h4 class="question-label">Question</h4>

                            <h3 class="question"></h3>
                        </div>

                        <div class="modal-section modal-results advanced-search-results search-results-container">

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

    <div class="card-section card-sidebar">
        <div class="card-heading">
            <h4 class="card-subheading">Overview</h4>

            <a class="link link-strong link-history" href="/history" title="View History">
				<span class="text">History</span>
			</a>
        </div>

        <aside class="progress-meter">
            <ul class="progress-list">
                <li class="progress-item" data-status="completed">
                    <div class="progress-title">
                        <a class="link" href="" title="">Overview</a>
                    </div>

                    <div class="progress-info">
                        <span class="progress-status">Completed</span>

                        <span class="progress-date">21 June 2017</span>
                    </div>
                </li>

                <li class="progress-item" data-status="completed">
                    <div class="progress-title">
                        <a class="link" href="" title="">Main Details</a>
                    </div>

                    <div class="progress-info">
                        <span class="progress-status">Completed</span>

                        <span class="progress-date">21 June 2017</span>
                    </div>
                </li>

                <li class="progress-item -subitem" data-status="unstarted">
                    <div class="progress-title">
                        <a class="link" href="" title="">Investigators</a>
                    </div>

                    <div class="progress-info">
                        <span class="progress-status">Not Started</span>
                    </div>
                </li>

                <li class="progress-item" data-status="draft">
                    <div class="progress-title">
                        <a class="link" href="" title="">Animal Usage</a>
                    </div>

                    <div class="progress-info">
                        <span class="progress-status">In draft</span>
                    </div>
                </li>

                <li class="progress-item" data-status="progress">
                    <div class="progress-title">
                        <a class="link" href="" title="">Documents</a>
                    </div>

                    <div class="progress-info">
                        <span class="progress-status">In Progress</span>
                    </div>
                </li>

                <li class="progress-item -active" data-status="progress">
                    <div class="progress-title">
                        <a class="link" href="" title="">Approvals</a>
                    </div>

                    <ul class="person-list sub-list">
                        <li class="person-item">
                            <a class="link" href="" title="">Katherine Dreibel</a>
                        </li>

                        <li class="person-item">
                            <a class="link" href="" title="">Jacob Gubb</a>
                        </li>
                    </ul>
                </li>

                <li class="progress-item -show-sections" data-status="progress">
                    <div class="progress-title">
                        <a class="link" href="" title="">Questionnaire</a>
                    </div>

                    <ul class="person-list sub-list">
                        <li class="person-item" data-status="completed">
                            <a class="link" href="" title="">Application</a>
                        </li>

                        <li class="person-item" data-status="unstarted">
                            <a class="link" href="" title="">Monitoring</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </aside>
    </div>
</div>
<div class="card -with-sidebar">
	<div class="card-content card-section -with-accordion">
		{{render '@answers' }}
	</div>

	<div class="card-section card-sidebar">
		<div class="card-heading">
			<h4 class="card-subheading">Overview</h4>

			<a class="link link-strong link-history" href="/history" title="View History">
				<span class="text">History</span>
			</a>
		</div>

		{{> @progress-meter }}
	</div>
</div>
{
  "pageTitle": "Questionnaire",
  "pageClass": "coversheet",
  "dataFormat": "expanded",
  "dataChart": "pie",
  "width": 238,
  "fontSize": 47.6,
  "projects": [
    {
      "title": "Breeding wheat strains to reduce the incidence macular degeneration",
      "remaining": 435000,
      "awarded": 445000,
      "total": 580000,
      "status": "on hold",
      "notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
    },
    {
      "title": "Assisted vision technologies",
      "remaining": 90000,
      "awarded": 340000,
      "total": 430000,
      "status": "active",
      "notes": "no roadblocks"
    },
    {
      "title": "Minimizing Carbon Emissions and Maximizing Carbon Sequestration and Storage by Seagrasses, Tidal Marshes, Mangroves",
      "remaining": 130000,
      "awarded": 155000,
      "total": 285000,
      "status": "active",
      "notes": "no roadblocks"
    },
    {
      "title": "Mitochondrial Turnover",
      "remaining": 60000,
      "awarded": 95000,
      "total": 125000,
      "status": "pending",
      "notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
    },
    {
      "title": "Crop resilience from complex genomes",
      "remaining": 90000,
      "awarded": 105000,
      "total": 125000,
      "status": "on hold",
      "notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
    }
  ],
  "other": 225000,
  "dataTotal": 2000000,
  "baseTitle": "Coversheet"
}

There are no notes for this item.