<div class="card -with-sidebar">
    <div class="card-section card-content">
        <div class="alert" data-status="success">
            <div class="alert-inner">
                <div class="alert-text">
                    <i class="alert-icon fa fa-check" aria-hidden="true"></i>

                    <div class="alert-info">Your last document was successfully uploaded</div>
                </div>

                <button class="btn btn-alert-dismiss js-alert-dismiss" type="button"></button>
            </div>
        </div>
        <h3 class="card-heading">
            <span class="text">Documents</span>
        </h3>

        <div>
            <p>You may upload <strong>msg, pdf, doc, wav, mp3, xls, tif, tiff, jpg, jpeg, mov, wma, docx, xlsx, rtf</strong> file types.</p>

            <p>Drag and drop into this window to upload or use the ‘Add file’ button below.</p>
        </div>

        <form action="/upload.php" class="upload-form" method="POST">
            <label class="btn btn-add-row file-field" for="fileUpload" tabindex="0" role="button">
				<span class="link link-strong">Add file</span>
		
				<span class="help">(or drag and drop)</span>
		
				<div class="drop-overlay -nav-padded">
					<div class="overlay-inner">
						<div class="overlay-content">
							<div class="overlay-icon">
								<svg viewBox="0 0 45 50">
									<use xlink:href="#icon-file"></use>
								</svg>
							</div>
		
							<h2>Drop to upload file to Coversheet</h2>
		
							<h3>Access your file in Forms &amp; Documents</h3>
		
							<input type="file" id="fileUpload" name="fileUpload" accept=".msg, .pdf, .doc, .wav, .mp3, .xls, .tif, .tiff, .jpg, .jpeg, .mov, .wma, .docx, .xlsx, .rtf, .xml" hidden data-max-size="4" >
						</div>
					</div>
				</div>
			</label>

            <div class="hidden-group -hidden">
                <div class="form-group">
                    <div class="form-field">
                        <label for="description">Description</label>

                        <input type="text" name="description" id="description">
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-field">
                        <label for="chrFormType">Type</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">
                                <span class="text">Document</span>
                            </div>

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

                <div class="button-group">
                    <button type="submit" class="btn btn-default">
						<span class="text">Submit</span>
					</button>

                    <button type="button" class="btn btn-default js-cancel-file">
						<span class="text">Cancel</span>
					</button>
                </div>
            </div>
        </form>
        <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">Date</span>

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

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

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

                    <div class="table-cell -inactive" style="width: 45%" data-name="chrFile" data-flex="1">
                        <span class="text">Document</span>

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

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

            <div class="table-row   " role="button" tabindex="0" data-document-id="DOCx56" data-module-name="grantsDocuments">

                <div class="table-group">

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

                        <div class="text">09/11/2017</div>

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

                        <div class="text">Standard Operating Procedure</div>

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

                        <div class="text">Animal-handling-sheet.rtf</div>

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

                        <div class="text">100 KB</div>

                    </div>

                </div>

                <div class="table-group actions-group -fixed" style="width: calc(1 * 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="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="table-row   " role="button" tabindex="0" data-document-id="DOCx58" data-module-name="grantsDocuments">

                <div class="table-group">

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

                        <div class="text">09/11/2017</div>

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

                        <div class="text">Standard Operating Procedure</div>

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

                        <div class="text">Animal-handling-sheet.pdf</div>

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

                        <div class="text">100 KB</div>

                    </div>

                </div>

                <div class="table-group actions-group -fixed" style="width: calc(1 * 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="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="table-row   " role="button" tabindex="0" data-document-id="DOCx59" data-module-name="grantsDocuments">

                <div class="table-group">

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

                        <div class="text">09/11/2017</div>

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

                        <div class="text">Standard Operating Procedure</div>

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

                        <div class="text">Animal-handling-sheet.docx</div>

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

                        <div class="text">100 KB</div>

                    </div>

                </div>

                <div class="table-group actions-group -fixed" style="width: calc(1 * 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="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="table-row   " role="button" tabindex="0" data-document-id="DOCx60" data-module-name="grantsDocuments">

                <div class="table-group">

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

                        <div class="text">09/11/2017</div>

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

                        <div class="text">Standard Operating Procedure</div>

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

                        <div class="text">Animal-handling-sheet.xlsx</div>

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

                        <div class="text">100 KB</div>

                    </div>

                </div>

                <div class="table-group actions-group -fixed" style="width: calc(1 * 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="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="table-row   " role="button" tabindex="0" data-document-id="DOCx61" data-module-name="grantsDocuments">

                <div class="table-group">

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

                        <div class="text">09/11/2017</div>

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

                        <div class="text">Standard Operating Procedure</div>

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

                        <div class="text">Animal-handling-sheet.mp3</div>

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

                        <div class="text">100 KB</div>

                    </div>

                </div>

                <div class="table-group actions-group -fixed" style="width: calc(1 * 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="Details" aria-label="Details" data-action="view-document" data-icon="details"></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <button type="button" class="btn link js-open-document" data-module-name="grantsDocuments" data-document-id="DOCx58">document-example.pdf</button>
        </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 alert }}
			{{> @alert }}
		{{/with}}

		<h3 class="card-heading">
			<span class="text">Documents</span>
		</h3>

		<div>
			<p>You may upload <strong>msg, pdf, doc, wav, mp3, xls, tif, tiff, jpg, jpeg, mov, wma, docx, xlsx, rtf</strong> file types.</p>

			<p>Drag and drop into this window to upload or use the ‘Add file’ button below.</p>
		</div>

		{{> @upload }}

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

		<div>
			<button type="button" class="btn link js-open-document" data-module-name="grantsDocuments" data-document-id="DOCx58">document-example.pdf</button>
		</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>

		{{> @progress-meter }}
	</div>
</div>
{
  "pageTitle": "Documents",
  "pageClass": "coversheet js-file-drop",
  "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",
  "alert": {
    "title": null,
    "info": "Your last document was successfully uploaded",
    "status": "success",
    "icon": "check"
  },
  "files": {
    "actions": [
      {
        "name": "view-document",
        "label": "Details",
        "icon": "details"
      }
    ],
    "columns": [
      {
        "name": "chrDate",
        "title": "Date",
        "width": 15
      },
      {
        "name": "chrType",
        "title": "Type",
        "width": 25
      },
      {
        "name": "chrFile",
        "title": "Document",
        "width": 45
      },
      {
        "name": "chrSize",
        "title": "Size",
        "width": 15
      }
    ],
    "tableData": [
      {
        "data": {
          "document-id": "DOCx56",
          "module-name": "grantsDocuments"
        },
        "columns": [
          {
            "name": "chrDate",
            "title": "Date",
            "value": "09/11/2017"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Standard Operating Procedure"
          },
          {
            "name": "chrFile",
            "title": "Document",
            "value": "Animal-handling-sheet.rtf"
          },
          {
            "name": "chrSize",
            "title": "Size",
            "value": "100 KB"
          }
        ]
      },
      {
        "data": {
          "document-id": "DOCx58",
          "module-name": "grantsDocuments"
        },
        "columns": [
          {
            "name": "chrDate",
            "title": "Date",
            "value": "09/11/2017"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Standard Operating Procedure"
          },
          {
            "name": "chrFile",
            "title": "Document",
            "value": "Animal-handling-sheet.pdf"
          },
          {
            "name": "chrSize",
            "title": "Size",
            "value": "100 KB"
          }
        ]
      },
      {
        "data": {
          "document-id": "DOCx59",
          "module-name": "grantsDocuments"
        },
        "columns": [
          {
            "name": "chrDate",
            "title": "Date",
            "value": "09/11/2017"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Standard Operating Procedure"
          },
          {
            "name": "chrFile",
            "title": "Document",
            "value": "Animal-handling-sheet.docx"
          },
          {
            "name": "chrSize",
            "title": "Size",
            "value": "100 KB"
          }
        ]
      },
      {
        "data": {
          "document-id": "DOCx60",
          "module-name": "grantsDocuments"
        },
        "columns": [
          {
            "name": "chrDate",
            "title": "Date",
            "value": "09/11/2017"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Standard Operating Procedure"
          },
          {
            "name": "chrFile",
            "title": "Document",
            "value": "Animal-handling-sheet.xlsx"
          },
          {
            "name": "chrSize",
            "title": "Size",
            "value": "100 KB"
          }
        ]
      },
      {
        "data": {
          "document-id": "DOCx61",
          "module-name": "grantsDocuments"
        },
        "columns": [
          {
            "name": "chrDate",
            "title": "Date",
            "value": "09/11/2017"
          },
          {
            "name": "chrType",
            "title": "Type",
            "value": "Standard Operating Procedure"
          },
          {
            "name": "chrFile",
            "title": "Document",
            "value": "Animal-handling-sheet.mp3"
          },
          {
            "name": "chrSize",
            "title": "Size",
            "value": "100 KB"
          }
        ]
      }
    ]
  },
  "dropdown": {
    "options": [
      {
        "title": "Document"
      }
    ]
  }
}

There are no notes for this item.