<div class="card">
    <div class="card-inner">

        <div class="card-section project-header">

            <h4 class="card-heading card-subheading">
                <span class="project-label">Project:</span>
                <span class="project-title">The Silk Roads in the Bronze Age: Critical links between Eurasia and China</span>
            </h4>

            <div class="project-info">
                <div class="info-row">
                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Chief Investigator</span>
                            <span class="text">Prof. Yuri Yaeger</span>
                        </div>
                    </div>

                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Primary funds provider</span>
                            <span class="text">Australian Research Council (ARC)</span>
                        </div>
                    </div>

                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Scheme</span>
                            <span class="text">Discovery Projects (DP)</span>
                        </div>
                    </div>

                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Funds provider ref</span>
                            <span class="text">923982350</span>
                        </div>
                    </div>
                </div>

                <div class="info-row">
                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Project status</span>
                            <span class="text">Active</span>
                        </div>
                    </div>

                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">GLC</span>
                            <span class="text">01.00.0.09345.4.XXXX.23535</span>
                        </div>
                    </div>

                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Registry number</span>
                            <span class="text">G217</span>
                        </div>
                    </div>

                    <div class="info-cell">
                        <div class="info-item">
                            <span class="info-label">Grand ID</span>
                            <span class="text">G217</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-section">

            <h4 class="card-subheading -with-underline">
                <span class="text">Progress Steps</span>

                <div class="subheading-right">
                    <div class="form-group">
                        <div class="form-field -fixed-width">
                            <div class="input-group toggle-group">
                                <label for="toggle1">
									<div class="text">
										<i class="fa fa-unlock" aria-hidden="true"></i>
										<span>Progress unlocked</span>
									</div>

									<input id="toggle1" type="checkbox" >

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

            <button class="btn btn-add-row js-page-action" data-action="new-row" data-module="progress">
				<span class="link link-strong">Add progress step</span>

				<span class="help">Also use this option to add all progress steps at once</span>
			</button>

            <div class="table">
                <div class="table-header table-row">
                    <div class="table-group">

                        <div class="table-cell -inactive" style="width: 30%" data-name="step" data-flex="1">
                            <span class="text">Progress Steps</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 20%" data-name="status" data-flex="1">
                            <span class="text">Status</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 25%" data-name="chrRole" data-flex="1">
                            <span class="text">Role</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 30%" data-name="notes" data-flex="1">
                            <span class="text">Notes</span>

                            <div class="table-handle"></div>
                        </div>

                    </div>

                    <!-- set width equal to calc(n * 10rem) where n is the number of actions -->
                    <div class="table-group actions-group -fixed" style="width: calc(3 * 10rem)">
                        <div class="table-cell table-actions -inactive">Actions</div>
                    </div>
                </div>

                <div class="table-row  -highlight-completed " data-href="/" data-preview="3463454">

                    <div class="table-group">

                        <div class="table-cell -with-icon " style="width: 30%" data-flex="1">

                            <div class="text"><span>1. Awaiting Initial Review</span><span class='icon'><i class='fa fa-file-text-o' aria-hidden='true'></i>3</span></div>

                        </div>
                        <div class="table-cell  " style="width: 20%" data-flex="1">

                            <div class="text"><span class='status' data-status='completed'></span></div>

                        </div>
                        <div class="table-cell   -with-input" style="width: 25%" data-flex="1">

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

                                <div class="dropdown-label">
                                    <label class="-hidden" for="chrRole"></label>
                                    <input type="hidden" name="chrRole" value="Co-investigator">
                                    <span class="text">Co-investigator</span>
                                </div>

                                <ul class="dropdown-options" aria-hidden="true">
                                    <li class="dropdown-item" data-value="Co-investigator" role="menuitem">Co-investigator</li>
                                </ul>
                            </div>
                        </div>
                        <div class="table-cell   -with-input" style="width: 30%" data-flex="1">

                            <input type="text" name="notes" value="">

                        </div>

                    </div>

                    <div class="table-group actions-group -fixed" style="width: calc(3 * 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="View step" aria-label="View step" data-action="view" data-icon="details"></button>
                                </li>
                                <li class="action-item">
                                    <button type="button" class="btn btn-action js-table-action " data-label="Edita step" aria-label="Edita step" data-action="edit" data-icon="edit"></button>
                                </li>
                                <li class="action-item">
                                    <button type="button" class="btn btn-action js-table-action " data-label="Delete step" aria-label="Delete step" data-action="delete" data-icon="delete"></button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table">
                <div class="table-header table-row">
                    <div class="table-group">

                        <div class="table-cell -inactive" style="width: 20%" data-name="provider" data-flex="1">
                            <span class="text">Progress Steps</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 20%" data-name="year2015" data-flex="1">
                            <span class="text">2015</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 20%" data-name="year2016" data-flex="1">
                            <span class="text">2016</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 20%" data-name="year2017" data-flex="1">
                            <span class="text">2017</span>

                            <div class="table-handle js-table-handle"></div>
                        </div>

                        <div class="table-cell -inactive" style="width: 20%" data-name="total" data-flex="1">
                            <span class="text">Total</span>

                        </div>

                    </div>

                </div>

                <div class="table-row   " data-href="/" data-preview="3463454">

                    <div class="table-group">

                        <div class="table-cell  " style="width: 20%" data-flex="1" data-unit="$">

                            <a class="link" href="/arc" title="View ARC">ARC</a>

                        </div>
                        <div class="table-cell  js-table-addend -with-input" style="width: 20%" data-flex="1" data-unit="$">

                            <input type="text" name="year2015" value="">

                        </div>
                        <div class="table-cell  js-table-addend -with-input" style="width: 20%" data-flex="1" data-unit="$">

                            <input type="text" name="year2016" value="">

                        </div>
                        <div class="table-cell  js-table-addend -with-input" style="width: 20%" data-flex="1" data-unit="$">

                            <input type="text" name="year2017" value="">

                        </div>
                        <div class="table-cell  js-table-sum -em" style="width: 20%" data-flex="1" data-unit="$">

                            <div class="text">0</div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="card">
	<div class="card-inner">
		{{> @project-header }}

		<div class="card-section">
			{{#with alert }}
				{{> @alert }}
			{{/with}}

			<h4 class="card-subheading -with-underline">
				<span class="text">Progress Steps</span>

				<div class="subheading-right">
					<div class="form-group">
						<div class="form-field -fixed-width">
							<div class="input-group toggle-group">
								<label for="toggle1">
									<div class="text">
										<i class="fa fa-unlock" aria-hidden="true"></i>
										<span>Progress unlocked</span>
									</div>

									<input id="toggle1" type="checkbox" >

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

			<button class="btn btn-add-row js-page-action" data-action="new-row" data-module="progress">
				<span class="link link-strong">Add progress step</span>

				<span class="help">Also use this option to add all progress steps at once</span>
			</button>

			{{#with progress }}
				{{> @table }}
			{{/with}}

			{{#with funds }}
				{{> @table }}
			{{/with}}
		</div>
	</div>
</div>
{
  "pageTitle": "Progress Steps",
  "pageClass": "dashboard",
  "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": "Dashboard",
  "tasks": {
    "checkbox": true,
    "select": true,
    "columns": [
      {
        "name": "chrTitle",
        "title": "Task Name",
        "width": 35
      },
      {
        "name": "chrProject",
        "title": "Project",
        "width": 20
      },
      {
        "name": "chrType",
        "title": "Type",
        "width": 15
      },
      {
        "name": "chrDueDate",
        "title": "Due Date",
        "width": 15
      },
      {
        "name": "chrChiefInvestigator",
        "title": "Chief Investigator",
        "width": 15
      }
    ],
    "tableData": [
      {
        "checkbox": {
          "name": "searchValue",
          "id": "checkbox_1",
          "value": "2983575"
        },
        "data": {
          "preview": "3463454",
          "message": "By approving this application you certify that:<p>1. I/we are qualified in the procedures described in this document</p>"
        },
        "columns": [
          {
            "name": "chrTitle",
            "title": "Task Name",
            "value": "Modeling trade duration in U.S. Treasury markets"
          },
          {
            "name": "chrProject",
            "title": "Project",
            "value": "Breeding wheat strains to reduce the incidence of macular degeneration"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Approvals"
          },
          {
            "name": "chrDueDate",
            "title": "Due Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrChiefInvestigator",
            "title": "Chief Investigator",
            "value": "Darcy Sanderson",
            "action": {
              "name": "details",
              "icon": "details",
              "label": "Chief Investigator Details",
              "value": "2598746"
            }
          }
        ]
      },
      {
        "checkbox": {
          "name": "searchValue",
          "id": "checkbox_2",
          "value": "2983575"
        },
        "data": {
          "preview": "3463454",
          "message": "By approving this application you certify that:<p>1. I/we are qualified in the procedures described in this document</p>"
        },
        "columns": [
          {
            "name": "chrTitle",
            "title": "Task Name",
            "value": "Modeling trade duration in U.S. Treasury markets"
          },
          {
            "name": "chrProject",
            "title": "Project",
            "value": "Breeding wheat strains to reduce the incidence of macular degeneration"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Approvals"
          },
          {
            "name": "chrDueDate",
            "title": "Due Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrChiefInvestigator",
            "title": "Chief Investigator",
            "value": "Darcy Sanderson",
            "action": {
              "name": "details",
              "icon": "details",
              "label": "Chief Investigator Details",
              "value": "2598746"
            }
          }
        ]
      },
      {
        "checkbox": {
          "name": "searchValue",
          "id": "checkbox_3",
          "value": "2983575"
        },
        "data": {
          "preview": "3463454",
          "message": "By approving this application you certify that:<p>1. I/we are qualified in the procedures described in this document</p>"
        },
        "columns": [
          {
            "name": "chrTitle",
            "title": "Task Name",
            "value": "Modeling trade duration in U.S. Treasury markets"
          },
          {
            "name": "chrProject",
            "title": "Project",
            "value": "Breeding wheat strains to reduce the incidence of macular degeneration"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Approvals"
          },
          {
            "name": "chrDueDate",
            "title": "Due Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrChiefInvestigator",
            "title": "Chief Investigator",
            "value": "Darcy Sanderson",
            "action": {
              "name": "details",
              "icon": "details",
              "label": "Chief Investigator Details",
              "value": "2598746"
            }
          }
        ]
      }
    ]
  },
  "milestones": {
    "rowClass": "js-table-link",
    "columns": [
      {
        "name": "chrTitle",
        "title": "Task Name",
        "width": 35
      },
      {
        "name": "chrProject",
        "title": "Project",
        "width": 20
      },
      {
        "name": "chrType",
        "title": "Type",
        "width": 15
      },
      {
        "name": "chrDueDate",
        "title": "Due Date",
        "width": 15
      },
      {
        "name": "chrChiefInvestigator",
        "title": "Chief Investigator",
        "width": 15
      }
    ],
    "tableData": [
      {
        "data": {
          "preview": "3463454"
        },
        "href": "/",
        "columns": [
          {
            "name": "chrTitle",
            "title": "Task Name",
            "value": "Modeling trade duration in U.S. Treasury markets"
          },
          {
            "name": "chrProject",
            "title": "Project",
            "value": "Breeding wheat strains to reduce the incidence of macular degeneration"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Approvals"
          },
          {
            "name": "chrDueDate",
            "title": "Due Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrChiefInvestigator",
            "title": "Chief Investigator",
            "value": "Darcy Sanderson",
            "action": {
              "name": "details",
              "icon": "details",
              "label": "Chief Investigator Details",
              "value": "2598746"
            }
          }
        ]
      },
      {
        "data": {
          "preview": "3463454"
        },
        "href": "/",
        "columns": [
          {
            "name": "chrTitle",
            "title": "Task Name",
            "value": "Modeling trade duration in U.S. Treasury markets"
          },
          {
            "name": "chrProject",
            "title": "Project",
            "value": "Breeding wheat strains to reduce the incidence of macular degeneration"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Approvals"
          },
          {
            "name": "chrDueDate",
            "title": "Due Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrChiefInvestigator",
            "title": "Chief Investigator",
            "value": "Darcy Sanderson",
            "action": {
              "name": "details",
              "icon": "details",
              "label": "Chief Investigator Details",
              "value": "2598746"
            }
          }
        ]
      },
      {
        "data": {
          "preview": "3463454"
        },
        "href": "/",
        "columns": [
          {
            "name": "chrTitle",
            "title": "Task Name",
            "value": "Modeling trade duration in U.S. Treasury markets"
          },
          {
            "name": "chrProject",
            "title": "Project",
            "value": "Breeding wheat strains to reduce the incidence of macular degeneration"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Approvals"
          },
          {
            "name": "chrDueDate",
            "title": "Due Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrChiefInvestigator",
            "title": "Chief Investigator",
            "value": "Darcy Sanderson",
            "action": {
              "name": "details",
              "icon": "details",
              "label": "Chief Investigator Details",
              "value": "2598746"
            }
          }
        ]
      }
    ]
  },
  "snapshots": {
    "actions": [
      {
        "name": "details",
        "label": "Details",
        "icon": "details"
      },
      {
        "name": "delete",
        "label": "Delete snapshot",
        "icon": "delete"
      }
    ],
    "rowClass": "js-table-link",
    "columns": [
      {
        "name": "chrDate",
        "title": "Date",
        "width": 10
      },
      {
        "name": "chrTime",
        "title": "Time",
        "width": 10
      },
      {
        "name": "chrAuthor",
        "title": "Author",
        "width": 80
      }
    ],
    "tableData": [
      {
        "columns": [
          {
            "name": "chrDate",
            "title": "Date",
            "value": "09/11/2017"
          },
          {
            "name": "chrTime",
            "title": "Time",
            "value": "12:47pm"
          },
          {
            "name": "chrAuthor",
            "title": "Author",
            "value": "Dr. Robyn Aagersen"
          }
        ],
        "data": {
          "href": "/",
          "preview": "3463454"
        }
      }
    ]
  },
  "progress": {
    "noClick": true,
    "actions": [
      {
        "name": "view",
        "label": "View step",
        "icon": "details"
      },
      {
        "name": "edit",
        "label": "Edita step",
        "icon": "edit"
      },
      {
        "name": "delete",
        "label": "Delete step",
        "icon": "delete"
      }
    ],
    "columns": [
      {
        "name": "step",
        "title": "Progress Steps",
        "width": 30
      },
      {
        "name": "status",
        "title": "Status",
        "width": 20
      },
      {
        "name": "chrRole",
        "title": "Role",
        "width": 25,
        "input": true,
        "dropdown": {
          "name": "chrRole",
          "title": "Role",
          "options": [
            {
              "title": "Co-investigator",
              "value": "Co-investigator"
            }
          ]
        }
      },
      {
        "name": "notes",
        "title": "Notes",
        "width": 30,
        "input": true
      }
    ],
    "tableData": [
      {
        "rowClass": "-highlight-completed",
        "columns": [
          {
            "name": "step",
            "value": "<span>1. Awaiting Initial Review</span><span class='icon'><i class='fa fa-file-text-o' aria-hidden='true'></i>3</span>",
            "class": "-with-icon"
          },
          {
            "name": "status",
            "value": "<span class='status' data-status='completed'></span>"
          },
          {
            "name": "chrRole",
            "dropdown": {
              "name": "chrRole",
              "title": "Role",
              "options": [
                {
                  "title": "Co-investigator",
                  "value": "Co-investigator"
                }
              ]
            }
          },
          {
            "name": "notes",
            "notes": ""
          }
        ],
        "data": {
          "href": "/",
          "preview": "3463454"
        }
      }
    ]
  },
  "funds": {
    "noClick": true,
    "columns": [
      {
        "name": "provider",
        "title": "Progress Steps",
        "width": 20
      },
      {
        "name": "year2015",
        "title": "2015",
        "class": "js-table-addend",
        "width": 20,
        "input": true
      },
      {
        "name": "year2016",
        "title": "2016",
        "class": "js-table-addend",
        "width": 20,
        "input": true
      },
      {
        "name": "year2017",
        "title": "2017",
        "class": "js-table-addend",
        "width": 20,
        "input": true
      },
      {
        "name": "total",
        "title": "Total",
        "class": "js-table-sum",
        "width": 20
      }
    ],
    "tableData": [
      {
        "columns": [
          {
            "name": "provider",
            "value": "ARC",
            "href": "/arc",
            "unit": "$"
          },
          {
            "name": "year2015",
            "value": "",
            "unit": "$"
          },
          {
            "name": "year2016",
            "value": "",
            "unit": "$"
          },
          {
            "name": "year2017",
            "value": "",
            "unit": "$"
          },
          {
            "name": "total",
            "value": "0",
            "em": true,
            "unit": "$"
          }
        ],
        "data": {
          "href": "/",
          "preview": "3463454"
        }
      }
    ]
  },
  "forCode": {
    "data": {
      "title": "Grants Title"
    },
    "dataColumns": [
      {
        "name": "chrShortTitle",
        "title": "Short Title",
        "width": 40
      },
      {
        "name": "intContractCounter",
        "title": "Contract Counter",
        "width": 15
      },
      {
        "name": "chrIdentification1",
        "title": "Identification 1",
        "width": 15
      },
      {
        "name": "chrStatus",
        "title": "Status",
        "width": 15
      },
      {
        "name": "chrContractCode",
        "title": "Contract Code",
        "width": 15
      }
    ],
    "noClick": true,
    "columns": [
      {
        "name": "forCode",
        "title": "FOR code",
        "data": {
          "name": "chrContractCode"
        },
        "width": 20,
        "input": true,
        "inputDisabled": true
      },
      {
        "name": "forDescription",
        "title": "FOR description",
        "data": {
          "name": "chrShortTitle"
        },
        "width": 60,
        "input": true,
        "inputDisabled": true
      },
      {
        "title": "Find a code",
        "width": 20
      }
    ],
    "tableData": [
      {
        "columns": [
          {
            "name": "forCode",
            "value": "FOR code"
          },
          {
            "name": "forDescription",
            "value": "FOR description"
          },
          {
            "value": "<button type='button' class='btn btn-link js-table-lookup js-btn-modal' data-modal='for-lookup'><span class='fa fa-search'></span><span class='link link-strong'>Lookup</span></button>"
          }
        ],
        "data": {
          "href": "/",
          "preview": "3463454",
          "advanced": "grantsTitle"
        }
      }
    ]
  }
}

There are no notes for this item.