<div class="card -with-sidebar">
    <div class="card-section card-content">
        <div class="table">
            <div class="table-header table-row">
                <div class="table-group">

                    <div class="table-cell -inactive" style="width: 15%" data-name="chrDate" data-flex="1">
                        <span class="text">Approval Date</span>

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

                    <div class="table-cell -inactive" style="width: 15%" data-name="chrOrder" data-flex="1">
                        <span class="text">Order</span>

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

                    <div class="table-cell -inactive" style="width: 35%" 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: 35%" data-name="chrApproved" data-flex="1">
                        <span class="text">Approved by</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(2 * 10rem)">
                    <div class="table-cell table-actions -inactive">Actions</div>
                </div>
            </div>

            <div class="table-row   " role="button" tabindex="0">

                <div class="table-group">

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

                        <div class="text">22/07/2017</div>

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

                        <input type="text" name="chrOrder" value="1">

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

                        <div class="text">Co-investigator</div>

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

                        <div class="text">Darcy Sanderson</div>

                    </div>

                </div>

                <div class="table-group actions-group -fixed" style="width: calc(2 * 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="Edit approval" aria-label="Edit approval" 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 approval" aria-label="Delete approval" data-action="delete" data-icon="delete"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </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-section card-content">
		{{#with approvals }}
			{{> @table }}
		{{/with}}
	</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": "Approvals",
  "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",
  "approvals": {
    "actions": [
      {
        "name": "edit",
        "label": "Edit approval",
        "icon": "edit"
      },
      {
        "name": "delete",
        "label": "Delete approval",
        "icon": "delete"
      }
    ],
    "columns": [
      {
        "name": "chrDate",
        "title": "Approval Date",
        "width": 15
      },
      {
        "name": "chrOrder",
        "title": "Order",
        "width": 15,
        "input": true
      },
      {
        "name": "chrRole",
        "title": "Role",
        "width": 35,
        "dropdown": {
          "name": "chrRole",
          "title": "Role",
          "options": [
            {
              "title": "Co-investigator",
              "value": "Co-investigator"
            }
          ]
        }
      },
      {
        "name": "chrApproved",
        "title": "Approved by",
        "width": 35
      }
    ],
    "tableData": [
      {
        "columns": [
          {
            "name": "chrDate",
            "title": "Approval Date",
            "value": "22/07/2017"
          },
          {
            "name": "chrOrder",
            "title": "Order",
            "value": "1"
          },
          {
            "name": "chrRole",
            "title": "Role",
            "value": "Co-investigator"
          },
          {
            "name": "chrApproved",
            "title": "Approved by",
            "value": "Darcy Sanderson"
          }
        ]
      }
    ]
  }
}

There are no notes for this item.