<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>What type of Coversheet would you like to create?</h3>

                <h4>Chief Investigator</h4>
            </div>

            <!-- data table ("excel style") -->

            <div class="form-group -full-width">
                <div class="form-field">
                    <label>Spreadsheet</label>

                    <table class="spreadsheet">
                        <tr class="table-header table-row">

                            <th class="table-cell ">
                                <span class="text">Description</span>
                            </th>

                            <th class="table-cell -align-right">
                                <span class="text">Year 1</span>
                                <span class="unit">$</span>
                            </th>

                            <th class="table-cell -align-right">
                                <span class="text">Year 2</span>
                                <span class="unit">$</span>
                            </th>

                            <th class="table-cell -align-right">
                                <span class="text">Year 3</span>
                                <span class="unit">$</span>
                            </th>

                            <th class="table-cell -align-right">
                                <span class="text">Year 4</span>
                                <span class="unit">$</span>
                            </th>

                            <th class="table-cell -align-right">
                                <span class="text">Year 5</span>
                                <span class="unit">$</span>
                            </th>

                            <th class="table-cell -align-right">
                                <span class="text">Total</span>
                                <span class="unit">$</span>
                            </th>

                        </tr>

                        <tr class="table-row">
                            <td class="table-cell ">
                                <input aria-label="Description for row 1" value="Grant ABC">
                            </td>
                            <td class="table-cell -align-right">
                                <input aria-label="Year 1 for row 1" value="99999999.99">
                            </td>
                            <td class="table-cell -align-right">
                                <input aria-label="Year 2 for row 1" value="99999999.99">
                            </td>
                            <td class="table-cell -align-right">
                                <input aria-label="Year 3 for row 1" value="99999999.99">
                            </td>
                            <td class="table-cell -align-right">
                                <input aria-label="Year 4 for row 1" value="99999999.99">
                            </td>
                            <td class="table-cell -align-right">
                                <input aria-label="Year 5 for row 1" value="99999999.99">
                            </td>
                            <td class="table-cell -align-right">
                                <input aria-label="Total for row 1" value="99999999.99">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- basic fields -->

            <div class="form-group">
                <div class="form-field">
                    <label for="chrFieldName">Basic field</label>

                    <input type="text" name="chrFieldName">
                </div>
            </div>

            <div class="form-group">
                <div class="form-field">
                    <label for="chrFieldName">Text area</label>

                    <textarea name="chrText" rows="6"></textarea>
                </div>
            </div>

            <!-- use data-col (max 12) on form-group and data-flex on form-field to adjust width of field -->

            <div class="form-group" data-col="2">
                <div class="form-field" data-flex="1">
                    <label for="chrFieldName">Short field</label>

                    <input type="text" name="chrFieldName">
                </div>
            </div>

            <!-- valid field -->

            <div class="form-group">
                <div class="form-field -valid">
                    <label for="chrValid">Valid field</label>

                    <input type="text" name="chrValid">
                </div>
            </div>

            <!-- invalid field -->

            <div class="form-group">
                <div class="form-field -invalid">
                    <label for="chrInvalid">
				<span class="message">Please follow the rules</span>

				<span>Invalid field<span>
			</label>

                    <input type="text" name="chrInvalid">
                </div>
            </div>

            <!-- dropdown -->

            <div class="form-group">
                <div class="form-field">
                    <label for="chrFormType">Dropdown</label>

                    <div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

                        <div class="dropdown-label">
                            <label class="-hidden" for="chrFormType"></label>
                            <input type="hidden" name="chrFormType" value="Amend an application">
                            <span class="text">Amend an application</span>
                        </div>

                        <ul class="dropdown-options" aria-hidden="true">
                            <li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
                            <li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- use data-col (max 12) on form-group and data-flex on form-field to place inputs side-by-side -->

            <div class="form-group" data-col="8">
                <div class="form-field" data-flex="5">
                    <label for="chrFormType">Dropdown</label>

                    <div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

                        <div class="dropdown-label">
                            <label class="-hidden" for="chrFormType"></label>
                            <input type="hidden" name="chrFormType" value="Amend an application">
                            <span class="text">Amend an application</span>
                        </div>

                        <ul class="dropdown-options" aria-hidden="true">
                            <li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
                            <li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
                        </ul>
                    </div>
                </div>

                <div class="form-field" data-flex="3">
                    <label for="chrFormType">Dropdown</label>

                    <div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

                        <div class="dropdown-label">
                            <label class="-hidden" for="chrFormType"></label>
                            <input type="hidden" name="chrFormType" value="Amend an application">
                            <span class="text">Amend an application</span>
                        </div>

                        <ul class="dropdown-options" aria-hidden="true">
                            <li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
                            <li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="form-subheading">
                <h4>Form subheading</h4>
            </div>

            <!-- advanced lookup -->

            <div class="form-group">
                <div class="form-field search-box" data-name="chrProject" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
                    data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
                    data-actions='[ { "name": "details", "icon": "details" }]'>

                    <label for="chrProject">Advanced Lookup</label>

                    <div class="input-group">
                        <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                        <ul class="search-tags"></ul>

                        <div class="search-advanced">
                            <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- advanced lookup with createMyRecord action -->

            <div class="form-group">
                <div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-module="grants" data-return="chrStaffNumber" data-row-class="js-create-record" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
                    data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
                    data-actions='[ { "name": "details", "icon": "details" }]'>

                    <label for="chrProject">Advanced Lookup (CreateMyRecord)</label>

                    <div class="input-group">
                        <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                        <ul class="search-tags"></ul>

                        <div class="search-advanced">
                            <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- advanced lookup with createMyRecord action -->

            <div class="form-group">
                <div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-create="2309849" data-module="grants" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
                    data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
                    data-actions='[ { "name": "details", "icon": "details" }]'>

                    <label for="chrProject">Advanced Lookup (Create New Record)</label>

                    <div class="input-group">
                        <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                        <ul class="search-tags"></ul>

                        <div class="search-advanced">
                            <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- date picker -->

            <div class="form-group">
                <div class="form-field date-field">
                    <label>Start Date</label>

                    <div class="input-group date-input-container">
                        <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY" data-initial-value="03/04/1990">

                        <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                        <input type="text" name="chrDate" hidden>

                        <button type="button" class="btn btn-date-picker js-date-picker"></button>
                    </div>
                </div>
            </div>

            <!-- two date fields of equal width -->

            <div class="form-group" data-col="2">
                <div class="form-field date-field" data-flex="1">
                    <label>Start Date</label>

                    <div class="input-group date-input-container">
                        <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

                        <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                        <input type="text" name="chrStartDate" hidden>

                        <button type="button" class="btn btn-date-picker js-date-picker"></button>
                    </div>
                </div>

                <div class="form-field date-field" data-flex="1">
                    <label>End Date</label>

                    <div class="input-group date-input-container">
                        <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

                        <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                        <input type="text" name="chrEndDate" hidden>

                        <button type="button" class="btn btn-date-picker js-date-picker"></button>
                    </div>
                </div>
            </div>

            <!-- checkbox group (select multiple) -->

            <div class="form-group">
                <div class="form-field">
                    <label>Checkbox Group</label>

                    <div class="input-group checkbox-group">
                        <label for="option1">
					<input name="option1" id="option1" type="checkbox" >

					<div class="label">
						<span class="text">Option 1</span>
					</div>
				</label>
                    </div>

                    <div class="input-group checkbox-group">
                        <label for="option2">
					<input name="option2" id="option2" type="checkbox" >

					<div class="label">
						<span class="text">Option 2</span>
					</div>
				</label>
                    </div>
                </div>
            </div>

            <!-- radio group (select one) -->

            <div class="form-group">
                <div class="form-field">
                    <label for="radioGroup">Radio Button Group</label>

                    <div class="input-group radio-group">
                        <label for="radio1">
					<input id="radio1" name="radioGroup" value="option1" type="radio" >

					<div class="label">
						<span class="text">First choice</span>
					</div>
				</label>

                        <label for="radio2">
					<input id="radio2" name="radioGroup" value="option2" type="radio" >

					<div class="label">
						<span class="text">Second choice</span>
					</div>
				</label>
                    </div>
                </div>
            </div>

            <!-- single checkbox with check -->

            <div class="form-group">
                <div class="form-field">
                    <label>
				<span class="text">Single checkbox</span>

				<div class="form-help">
					<button type="button" class="btn btn-help -to-right js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about this.</div>
					</button>

					<span class="help-text">Visible by default</span>
				</div>
			</label>

                    <div class="input-group checkbox-group -with-check">
                        <label for="singleCheck">
					<input name="singleCheck" id="singleCheck" type="checkbox">

					<div class="label">
						<span class="text">Hide status</span>
					</div>
				</label>
                    </div>
                </div>
            </div>

            <!-- WYSIWYG -->

            <div class="form-group">
                <div class="form-field">
                    <label for="editor-1">WYSIWYG</label>

                    <textarea class="js-wysiwyg" name="editor-1" id="editor-1" rows="10">
		        <p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>&nbsp;&nbsp;</p>
		    </textarea>
                </div>
            </div>

            <!-- toggle with multiple fields -->

            <div class="form-group -full-width">
                <label>Toggle field group</label>

                <div class="compound-field">
                    <div class="form-field -fixed-width">
                        <div class="input-group toggle-group">
                            <label for="toggle1">
						<input id="toggle1" type="checkbox" >

						<div class="label"></div>
					</label>
                        </div>
                    </div>

                    <label>by</label>

                    <div class="form-field search-box" data-name="chrCompound1" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
                        data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
                        data-actions='[ { "name": "details", "icon": "details" }]'>

                        <div class="input-group">
                            <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                            <ul class="search-tags"></ul>

                            <div class="search-advanced">
                                <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
							<span class="fa fa-search"></span> 
							<span class="link link-strong">Lookup</span>
						</button>
                            </div>
                        </div>
                    </div>

                    <label>on</label>

                    <div class="date-field form-field">
                        <div class="input-group date-input-container">
                            <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

                            <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                            <input type="text" name="chrCompound2" hidden>

                            <button type="button" class="btn btn-date-picker js-date-picker"></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- accordion -->

            <div class="form-subheading">
                <h4>Accordions</h4>

                <div class="heading-links">
                    <div class="label">Accordions:</div>

                    <button type="button" class="btn link js-accordion-expand" data-accordion="group-name">Expand all</button>

                    <button type="button" class="btn link js-accordion-collapse" data-accordion="group-name">Collapse all</button>
                </div>
            </div>

            <div class="accordion-group" data-accordion="group-name">
                <div class="accordion">
                    <button type="button" class="btn accordion-header js-accordion">
				<h4 class="accordion-title">
					<span class="text">Accordion</span>
				</h4>
			</button>

                    <div class="accordion-content">
                        <div class="form-group">
                            <div class="form-field">
                                <label for="chrFieldName">Basic field</label>

                                <input type="text" name="chrFieldName">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion -collapsed">
                    <button type="button" class="btn accordion-header js-accordion">
				<h4 class="accordion-title">
					<span class="text">Accordion Collapsed</span>
				</h4>
			</button>

                    <div class="accordion-content">
                        <div class="form-group">
                            <div class="form-field">
                                <label for="chrFieldName">Basic field</label>

                                <input type="text" name="chrFieldName">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- submit button -->

            <div class="submit-group">
                <div class="form-field">
                    <div class="input-group checkbox-group -with-check">
                        <label for="complete">
					<input name="complete" id="complete" type="checkbox">

					<div class="label">
						<span class="text">Mark this section as complete</span>
					</div>
				</label>
                    </div>
                </div>

                <div class="dropdown-button">
                    <button type="submit" class="btn btn-default" formaction="/submit-and-redirect">Save and continue</button>

                    <div role="button" class="btn dropdown js-dropdown" data-role="button" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
                        <div class="icon"></div>

                        <ul class="dropdown-options" aria-hidden="true">
                            <li class="btn dropdown-item" data-action="" role="menuitem">
                                <button type="submit" class="btn link link-strong" formaction="/submit-and-stay">Save</button>
                            </li>

                            <li class="btn dropdown-item" data-action="" role="menuitem">
                                <button type="submit" class="btn link link-strong" formaction="/submit-and-redirect">Save and continue</button>
                            </li>

                            <li class="btn dropdown-item" data-action="" role="menuitem">
                                <button type="submit" class="btn link link-strong" formaction="/submit-and-exit">Save and exit</button>
                            </li>

                            <li class="btn dropdown-item" data-action="" role="menuitem">
                                <a href="/preview" title="Preview" class="link link-strong">Preview</a>
                            </li>

                            <li class="btn dropdown-item" data-action="" role="menuitem">
                                <a href="/restore" title="Restore" class="link link-strong">Restore</a>
                            </li>

                            <li class="btn dropdown-item" data-action="" role="menuitem">
                                <a href="/exit" title="Discard changes" class="link link-strong">Discard changes</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="autosave-label">
                <span class="timestamp"></span>
            </div>

            <div class="modal modal-advanced-search js-modal js-modal-exit -nav-padded -with-overlay" data-modal="advanced-search">
                <div class="modal-inner inner">
                    <div class="modal-panel advanced-search-container">
                        <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">Advanced Lookup</span>
                            </h3>
                        </div>
                        <div class="modal-section advanced-search-form modal-advanced-form">
                            <div data-col="6">
                                <div class="form-field advanced-search-field" data-flex="4" data-col="4" data-required="true" data-min-length="2">
                                    <label class="advanced-search-label" data-flex="1" for="SearchValue"></label>
                                    <input data-flex="3" name="SearchValue" class="advanced-search-input"></input>
                                </div>

                                <div class="criteria-text form-field advanced-search-field" data-col="6" data-flex="2">
                                    <div data-flex="2"></div>
                                    <label class="advanced-search-label" data-flex="2" for="SearchValue"></label>
                                    <input data-flex="2" name="SearchValue" class="advanced-search-input"></input>
                                </div>
                            </div>
                            <div class="advanced-search-criteria" data-col="6">
                                <div class="criteria-dropdown form-field advanced-search-field" data-col="6" data-flex="6"></div>
                                <div class="criteria-checkbox form-field advanced-search-field" data-col="3" data-flex="3"></div>

                                <div class="btn-container" data-flex="3">
                                    <a class="btn btn-create-record js-parent-create-record">
								<span class="fa fa-plus-circle"></span>
								<span class="link link-strong">Create a new record</span>
							</a>

                                    <button type="button" class="btn btn-default btn-update-advanced js-btn-update-advanced">
								<div class="text">Show Records</div>
							</button>
                                </div>
                            </div>
                        </div>

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

                        </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 '@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>

		{{> @progress-meter }}
	</div>
</div>
{
  "pageTitle": "Coversheet",
  "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.