<div class="card">
    <div class="card-content card-section">
        <div class="table" data-module="grants">
            <div class="table-header table-row">
                <div class="table-group">
                    <div class="table-cell" style="width: 8%">
                        <span class="text">Check</span>
                        <div class="table-handle js-table-handle"></div>
                    </div>

                    <div class="table-cell" style="width: 32%">
                        <span class="text">Comments</span>
                        <div class="table-handle js-table-handle"></div>
                    </div>

                    <div class="table-cell" style="width: 20%">
                        <span class="text">Type</span>
                        <div class="table-handle js-table-handle"></div>
                    </div>

                    <div class="table-cell" style="width: 20%">
                        <span class="text">Date</span>
                        <div class="table-handle js-table-handle"></div>
                    </div>

                    <div class="table-cell" style="width: 20%">
                        <span class="text">Account</span>
                        <div class="table-handle js-table-handle"></div>
                    </div>
                </div>

                <div class="table-group actions-group -fixed" style="width: 10rem">
                    <div class="table-cell table-actions">Actions</div>
                </div>
            </div>

            <div class="table-row">
                <div class="table-group">
                    <div class="table-cell" style="width: 8%">
                        <div class="input-group">
                            <label>
								<input type="checkbox" name="row0" value="your value" id="table-row0" aria-label="Checkbox label">

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

                    <div class="table-cell" style="width: 32%">
                        <div class="form-field search-box">
                            <div class="input-group">
                                <input name="chrComment_0" id="chrComment_0" class="search-box-input" placeholder="Comment" data-modal="input" aria-label="Comment" disabled>

                                <div class="search-advanced-cell">
                                    <button type="button" class="btn btn-link btn-advanced-search js-btn-modal js-edit-input" data-modal="input" data-label="Comment" data-id="chrComment_0" data-maxlength="50" aria-label="Edit text input">
										<span class="fa fa-edit"></span> 
									</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-cell -with-input" style="width: 20%">
                        <select name="selectName" aria-label="Select label">
							<option>Option 1</option>
							<option>Option 2</option>
						</select>
                    </div>

                    <div class="table-cell -with-input" style="width: 20%">
                        <div class="form-field date-field">
                            <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" aria-label="Date label">

                                <!-- 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>

                    <div class="table-cell" style="width: 20%">
                        <div class="form-field search-box" data-name="chrProject" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-return-display="$chrSurname, $chrFirstName" data-prefill-value="12345678" data-prefill-display="Peter Mackie"
                            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="Look up account" data-modal="advanced-search" aria-label="Lookup label">

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

                                <div class="search-advanced-cell">
                                    <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search" aria-label="Lookup [module name]">
										<span class="fa fa-search"></span> 
									</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-group actions-group -fixed" style="width: 10rem">
                    <div class="table-cell table-actions">
                        <ul class="actions-list">
                            <li class="action-item">
                                <button type="button" class="btn btn-action js-table-action" data-label="Clone Record" aria-label="Clone Record" data-action="record-clone" data-icon="clone"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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>
<div class="modal modal-input -with-overlay -nav-padded js-modal js-modal-exit" data-modal="input">
    <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">Edit text</span>
                </h3>
            </div>

            <div class="modal-section modal-form">
                <div class="form-field" data-col="1">
                    <label class="js-label" data-flex="1"></label>
                    <textarea class="js-update-input-textarea" data-flex="1"></textarea>
                </div>

                <div class="button-group" style="justify-content: flex-end">
                    <button class="btn btn-default js-update-input" type="button">
						<span class="text">Update</span>
					</button>

                    <button class="btn btn-default js-modal-exit" type="button">
						<span class="text">Cancel</span>
					</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card project-overview">
    <div class="card-section card-left">
        <div class="card-heading" data-col="3">
            <h3 class="card-title" data-flex="2">
                <span class="text">Assisted vision technologies</span>
            </h3>

            <div class="project-status" data-flex="1">
                <h4 class="card-subheading">Project status</h4>

                <div class="status" data-status="completed"></div>
            </div>
        </div>

        <div class="project-details" data-col="3">
            <div data-span="2" class="description">
                <h4 class="card-subheading">
                    <div class="text">Description</div>
                </h4>

                <div class="body">
                    <p>Of all of the celestial bodies that capture our attention and fascination as astronomers, none has a greater influence on life on planet Earth than it’s own satellite, the moon. When you think about it, we regard the moon with such
                        powerful significance that unlike the moons of other planets which we give names, we only refer to our one and only orbiting orb as THE moon. It is not a moon. To us, it is the one and only moon.</p>
                    <p>The moon works its way into our way of thinking, our feelings about romance, our poetry and literature and even how we feel about our day in day out lives in many cases.</p>
                    <p>Math example: There are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</p>
                    <p>This <strong>is </strong>a test&nbsp;<span class=math-tex>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>of the <em>ckEditor </em>math-tex</p>
                </div>

                <div class="submissions">
                    <h4 class="card-subheading">
                        <div class="text">Submissions</div>
                    </h4>

                    <div class="applications-stats stat-boxes align-left">
                        <div class="stat-box">
                            <div class="text">8</div>
                            <div class="sub-text">Drafted</div>
                        </div>
                        <div class="stat-box">
                            <div class="text">3</div>
                            <div class="sub-text">Submitted</div>
                        </div>
                    </div>
                </div>
            </div>

            <div data-span="1">
                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">Dates</div>
                    </h4>

                    <div class="body -em">
                        <p>27 July 2015 β€” Ongoing</p>
                    </div>
                </div>

                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">Type of research</div>
                    </h4>

                    <div class="body">
                        <p>Applied research</p>
                    </div>
                </div>

                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">FOR Codes</div>
                    </h4>

                    <div class="body -small">
                        <p>BA001234 - Molecular Testing (75%)</p>
                        <p>BA001234 - Molecular Testing (75%)</p>
                    </div>
                </div>

                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">ARC Ref</div>
                    </h4>

                    <div class="body -small">
                        <p>LP160100401</p>
                    </div>
                </div>
            </div>

            <div data-span="3" class="divider"></div>

            <div data-span="1">
                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">Chief Investigator</div>
                    </h4>

                    <div class="body -em">
                        <a class="link" href="/">Prof Jacob Gubb</a>
                    </div>

                    <div class="body -small -full">
                        <a href="/" class="link link-email">jacob-gub@uo.com</a>
                    </div>

                    <div class="body -small -full">
                        <a href="/" class="link link-phone">+64 888 123 4567</a>
                    </div>
                </div>
            </div>

            <div data-span="1">
                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">Department</div>
                    </h4>

                    <div class="body -small">
                        <p>Dept. of Optometry and Vision Science, <br>Faculty of Health Science, WU</p>
                    </div>
                </div>
            </div>

            <div data-span="1">
                <div class="body-group">
                    <h4 class="card-subheading">
                        <div class="text">Institution</div>
                    </h4>

                    <div class="body -em">
                        <p>University of Melbourne</p>
                    </div>

                    <div class="body -small">
                        <p>School of Biomedical Sciences, <br>Molecular and Cellular Biology</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card-section card-right">
        <div class="project-stats">
            <div class="funding">
                <h4 class="card-subheading">Funding Balance</h4>

                <div data-col="2">
                    <div data-flex="1">
                        <div class="amount-group">
                            <div class="amount -highlight">$300,000</div>

                            <p class="body">Remaining</p>
                        </div>

                        <div class="projects-key amount-group">
                            <ul class="projects-list">
                                <li class="list-item">
                                    <h4 class="card-subheading">Research Support<br>2009 – 2018</h4>

                                    <div class="amount">$7,299</div>
                                </li>

                                <li class="list-item">
                                    <h4 class="card-subheading">ARC Funding<br>2009 – 2018</h4>

                                    <div class="amount">$1,000</div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div data-flex="1">
                        <div id="project-chart" class="chart" data-modal="tooltip" data-chart="pie" data-format="expanded" data-array="7299, 1000" data-total="8299"></div>
                    </div>
                </div>

                <div class="line-chart">
                    <h4 class="card-subheading">
                        <span class="text">Funding overview</span>
                    </h4>

                    <div class="chart" data-unit="dollar" data-chart="line" data-array="[ [ 500000, 500000, 500000, 500000 ], [ 100000, 100000, 300000, 400000 ], [ 100000, 100000, 425000, 450000 ], [ 300000, 350000, 450000, 500000 ] ]" data-interval="5">
                        <div class="axis-y">
                            <ul class="axis-list"></ul>
                        </div>

                        <div class="graph">
                            <svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
							</svg>

                            <div class="plot">
                                <svg x="0px" y="0px" viewBox="0 0 220 110" data-view="[ 220, 110 ]" preserveAspectRatio="none"></svg>
                            </div>
                        </div>

                        <div class="axis-x">
                            <ul class="axis-list">
                                <li class="axis-item">
                                    <span class="text">1st Quarter</span>
                                </li>
                                <li class="axis-item">
                                    <span class="text">2nd Quarter</span>
                                </li>
                                <li class="axis-item">
                                    <span class="text">3rd Quarter</span>
                                </li>
                                <li class="axis-item">
                                    <span class="text">4th Quarter</span>
                                </li>
                            </ul>
                        </div>

                        <div class="legend">
                            <h4 class="card-subheading">Legend</h4>

                            <ul class="legend-list">
                                <li class="legend-item">
                                    <span class="text">Awarded Funding</span>
                                </li>

                                <li class="legend-item">
                                    <span class="text">Invoiced Funding</span>
                                </li>

                                <li class="legend-item">
                                    <span class="text">Received Funding</span>
                                </li>

                                <li class="legend-item">
                                    <span class="text">Applied Funding</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ajax-table">
    <form class="search-form" data-custom-modal-search-value="" data-fixed-search="true" data-page="updateJanuary2019" data-module="grants" data-search-id="chrContractCode" data-gui-title="default" data-gui-id="99" data-gui-columns='[ { "name": "chrShortTitle", "title": "Title", "width": "27.5" }, { "name": "chrFirstNamedInvestigator", "title": "Investigator", "width": "27.5", "em": true }, { "name": "chrStatus", "title": "Status", "width": "15" }, { "name": "chrSchemeName", "title": "Scheme", "width": "15" }, { "name": "chrFundsProviderName", "title": "Funds Provider", "width": "15" }]'
        data-options='{ "sortBy": "intContractCounter", "pageLength": "12" }' data-show-status="true" data-create-parent="true" data-actions='[ { "name": "details", "icon": "details", "label": "Details", "data": { "custom-modal-search-value": "test" }  } , { "name": "record-delete", "icon": "delete", "label": "Delete record" }  ]'>
        <input name="chrStatus" value="Active" hidden>
    </form>

    <div class="search-results-container"></div>
</div>
<div class="card">
	<div class="card-content card-section">
		<div class="table" data-module="grants">
			<div class="table-header table-row">
				<div class="table-group">
					<div class="table-cell" style="width: 8%">
						<span class="text">Check</span>
						<div class="table-handle js-table-handle"></div>
					</div>

					<div class="table-cell" style="width: 32%">
						<span class="text">Comments</span>
						<div class="table-handle js-table-handle"></div>
					</div>

					<div class="table-cell" style="width: 20%">
						<span class="text">Type</span>
						<div class="table-handle js-table-handle"></div>
					</div>

					<div class="table-cell" style="width: 20%">
						<span class="text">Date</span>
						<div class="table-handle js-table-handle"></div>
					</div>

					<div class="table-cell" style="width: 20%">
						<span class="text">Account</span>
						<div class="table-handle js-table-handle"></div>
					</div>
				</div>

				<div class="table-group actions-group -fixed" style="width: 10rem">
					<div class="table-cell table-actions">Actions</div>
				</div>
			</div>

			<div class="table-row">
				<div class="table-group">
					<div class="table-cell" style="width: 8%">
						<div class="input-group">
							<label>
								<input type="checkbox" name="row0" value="your value" id="table-row0" aria-label="Checkbox label">

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

					<div class="table-cell" style="width: 32%">
						<div class="form-field search-box">
							<div class="input-group">
								<input name="chrComment_0" id="chrComment_0" class="search-box-input" placeholder="Comment" data-modal="input" aria-label="Comment" disabled>

								<div class="search-advanced-cell">
									<button
										type="button"
										class="btn btn-link btn-advanced-search js-btn-modal js-edit-input"
										data-modal="input"
										data-label="Comment"
										data-id="chrComment_0"
										data-maxlength="50"
										aria-label="Edit text input"
									>
										<span class="fa fa-edit"></span> 
									</button>
								</div>
							</div>
						</div>
					</div>

					<div class="table-cell -with-input" style="width: 20%">
						<select name="selectName" aria-label="Select label">
							<option>Option 1</option>
							<option>Option 2</option>
						</select>
					</div>

					<div class="table-cell -with-input" style="width: 20%">
						<div class="form-field date-field">
							<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" aria-label="Date label">

								<!-- 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>

					<div class="table-cell" style="width: 20%">
						<div class="form-field search-box"
							data-name="chrProject"
							data-advanced="people" 
							data-advanced-crit="Surname"
							data-return="chrStaffNumber" 
							data-return-display="$chrSurname, $chrFirstName"
							data-prefill-value="12345678"
							data-prefill-display="Peter Mackie"
							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="Look up account" data-modal="advanced-search" aria-label="Lookup label">

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

								<div class="search-advanced-cell">
									<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search" aria-label="Lookup [module name]">
										<span class="fa fa-search"></span> 
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="table-group actions-group -fixed" style="width: 10rem">
					<div class="table-cell table-actions">
						<ul class="actions-list">
							<li class="action-item">
								<button type="button" class="btn btn-action js-table-action" 
								data-label="Clone Record"
								aria-label="Clone Record"
								data-action="record-clone"
								data-icon="clone"></button>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{{> '@modal--search' }}
{{> '@modal--input' }}

<div class="card project-overview">
	<div class="card-section card-left">
		<div class="card-heading" data-col="3">
			<h3 class="card-title" data-flex="2">
				<span class="text">Assisted vision technologies</span>
			</h3>

			<div class="project-status" data-flex="1">
				<h4 class="card-subheading">Project status</h4>

				<div class="status" data-status="completed"></div>
			</div>
		</div>

		<div class="project-details" data-col="3">
			<div data-span="2" class="description">
				<h4 class="card-subheading">
					<div class="text">Description</div>
				</h4>

				<div class="body">
					<p>Of all of the celestial bodies that capture our attention and fascination as astronomers, none has a greater influence on life on planet Earth than it’s own satellite, the moon. When you think about it, we regard the moon with such powerful significance that unlike the moons of other planets which we give names, we only refer to our one and only orbiting orb as THE moon. It is not a moon. To us, it is the one and only moon.</p>
					<p>The moon works its way into our way of thinking, our feelings about romance, our poetry and literature and even how we feel about our day in day out lives in many cases.</p>
					<p>Math example: There are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</p>
					<p>This <strong>is </strong>a test&nbsp;<span class=math-tex>\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>of the <em>ckEditor </em>math-tex</p>
				</div>

				<div class="submissions">
					<h4 class="card-subheading">
						<div class="text">Submissions</div>
					</h4>

					<div class="applications-stats stat-boxes align-left">
						<div class="stat-box">
							<div class="text">8</div>
							<div class="sub-text">Drafted</div>
						</div>
						<div class="stat-box">
							<div class="text">3</div>
							<div class="sub-text">Submitted</div>
						</div>
					</div>
				</div>
			</div>

			<div data-span="1">
				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">Dates</div>
					</h4>

					<div class="body -em">
						<p>27 July 2015 β€” Ongoing</p>
					</div>
				</div>

				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">Type of research</div>
					</h4>

					<div class="body">
						<p>Applied research</p>
					</div>
				</div>

				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">FOR Codes</div>
					</h4>

					<div class="body -small">
						<p>BA001234 - Molecular Testing (75%)</p>
						<p>BA001234 - Molecular Testing (75%)</p>
					</div>
				</div>

				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">ARC Ref</div>
					</h4>

					<div class="body -small">
						<p>LP160100401</p>
					</div>
				</div>
			</div>
			
			<div data-span="3" class="divider"></div>

			<div data-span="1">
				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">Chief Investigator</div>
					</h4>

					<div class="body -em">
						<a class="link" href="/">Prof Jacob Gubb</a>
					</div>

					<div class="body -small -full">
						<a href="/" class="link link-email">jacob-gub@uo.com</a>
					</div>

					<div class="body -small -full">
						<a href="/" class="link link-phone">+64 888 123 4567</a>
					</div>
				</div>
			</div>

			<div data-span="1">
				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">Department</div>
					</h4>

					<div class="body -small">
						<p>Dept. of Optometry and Vision Science, <br>Faculty of Health Science, WU</p>
					</div>
				</div>
			</div>

			<div data-span="1">
				<div class="body-group">
					<h4 class="card-subheading">
						<div class="text">Institution</div>
					</h4>

					<div class="body -em">
						<p>University of Melbourne</p>
					</div>

					<div class="body -small">
						<p>School of Biomedical Sciences, <br>Molecular and Cellular Biology</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="card-section card-right">
		<div class="project-stats">
			<div class="funding">
				<h4 class="card-subheading">Funding Balance</h4>

				<div data-col="2">
					<div data-flex="1">
						<div class="amount-group">
							<div class="amount -highlight">$300,000</div>

							<p class="body">Remaining</p>
						</div>

						<div class="projects-key amount-group">
							<ul class="projects-list">
								<li class="list-item">
									<h4 class="card-subheading">Research Support<br>2009 – 2018</h4>

									<div class="amount">$7,299</div>
								</li>

								<li class="list-item">
									<h4 class="card-subheading">ARC Funding<br>2009 – 2018</h4>

									<div class="amount">$1,000</div>
								</li>
							</ul>
						</div>
					</div>

					<div data-flex="1">
						<div id="project-chart" class="chart" data-modal="tooltip" data-chart="pie" data-format="expanded" data-array="7299, 1000" data-total="8299"></div>
					</div>
				</div>

				<div class="line-chart">
					<h4 class="card-subheading">
						<span class="text">Funding overview</span>
					</h4>

					<div class="chart" data-unit="dollar" data-chart="line" data-array="[ [ 500000, 500000, 500000, 500000 ], [ 100000, 100000, 300000, 400000 ], [ 100000, 100000, 425000, 450000 ], [ 300000, 350000, 450000, 500000 ] ]" data-interval="5">
						<div class="axis-y">
							<ul class="axis-list"></ul>
						</div>

						<div class="graph">
							<svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
							</svg>

							<div class="plot">
								<svg x="0px" y="0px" viewBox="0 0 220 110"  data-view="[ 220, 110 ]" preserveAspectRatio="none"></svg>
							</div>
						</div>

						<div class="axis-x">
							<ul class="axis-list">
								<li class="axis-item">
									<span class="text">1st Quarter</span>
								</li>
								<li class="axis-item">
									<span class="text">2nd Quarter</span>
								</li>
								<li class="axis-item">
									<span class="text">3rd Quarter</span>
								</li>
								<li class="axis-item">
									<span class="text">4th Quarter</span>
								</li>
							</ul>
						</div>

						<div class="legend">
							<h4 class="card-subheading">Legend</h4>

							<ul class="legend-list">
								<li class="legend-item">
									<span class="text">Awarded Funding</span>
								</li>

								<li class="legend-item">
									<span class="text">Invoiced Funding</span>
								</li>

								<li class="legend-item">
									<span class="text">Received Funding</span>
								</li>

								<li class="legend-item">
									<span class="text">Applied Funding</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="ajax-table">
	<form class="search-form" data-custom-modal-search-value="" data-fixed-search="true" data-page="updateJanuary2019" data-module="grants" data-search-id="chrContractCode" data-gui-title="default" data-gui-id="99" data-gui-columns='[ { "name": "chrShortTitle", "title": "Title", "width": "27.5" }, { "name": "chrFirstNamedInvestigator", "title": "Investigator", "width": "27.5", "em": true }, { "name": "chrStatus", "title": "Status", "width": "15" }, { "name": "chrSchemeName", "title": "Scheme", "width": "15" }, { "name": "chrFundsProviderName", "title": "Funds Provider", "width": "15" }]' data-options='{ "sortBy": "intContractCounter", "pageLength": "12" }' data-show-status="true" data-create-parent="true" data-actions='[ { "name": "details", "icon": "details", "label": "Details", "data": { "custom-modal-search-value": "test" }  } , { "name": "record-delete", "icon": "delete", "label": "Delete record" }  ]'>	
		<input name="chrStatus" value="Active" hidden>
	</form>

	<div class="search-results-container"></div>
</div>
{
  "pageTitle": "Update January 2019",
  "pageClass": "update-1-19",
  "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": "Update January 2019"
}

There are no notes for this item.