{^{for #data}}
<div class="contentArea viewDetails reportDetails" data-link="data-id{>_id}">
	{^{if generatedReport && ((generatedReport).reportStatus === "CREATED" || (generatedReport).reportStatus === "CSV_ONLY")}}
			<div class="row">
				<div class="">
					<h3 class="name greenBackground">{^{>name}} Report {^{if itemName}} For "{^{>itemName}}"{{/if}}</h3>
					<h5>This report was last generated <span data-link="data-ts{>(generatedReport).reportGeneratedTimestamp}"></span></h5>
				</div>
				<div class="">
					<h3>Download</h3>
					<div class="actions">
                        {^{if (generatedReport).csvDownloadUrl}}
						<a id="reportCSVPrint" data-link="href{:(generatedReport).csvDownloadUrl}" target="_blank">
							<div class="controls btn btn-primary pull-left">
								<span class="controls glyphicons glyphicons-print white"></span> CSV
							</div>
						</a>
                        {{/if}}
						{^{if (generatedReport).pdfDownloadUrl}}
							<a id="reportPDFPrint" data-link="href{:(generatedReport).pdfDownloadUrl}" target="_blank" class="">
								<div class="controls btn btn-primary pull-left marginLeft10">
									<span class="controls glyphicons glyphicons-print white"></span> PDF
								</div>
							</a>
						{{/if}}
						<div class="clearFix"></div>
					</div>
				</div>

			</div>
	{{/if}}
	{^{if generatedReport && (generatedReport).reportStatus === "ERROR"}}
		<div class="row">
			<div class="alert error">
				<div class="glyphicons glyphicons-circle-remove white pull-left"></div>
				<div class="pull-left message">
					<h4 class="title">Error</h4>
					<span>An error occurred while generating your report. Please generate another.</span>
				</div>
				<div class="clearFix"></div>
			</div>
		</div>
	{{/if}}
	{^{if generatedReport && (generatedReport).reportStatus === "CSV_ONLY"}}
		<div class="row">
			<div class="alert error">
				<div class="glyphicons glyphicons-circle-remove white pull-left"></div>
				<div class="pull-left message">
					<h4 class="title">Error</h4>
					<span>The report generated is too large to be able to generate a PDF.</span>
				</div>
				<div class="clearFix"></div>
			</div>
		</div>
	{{/if}}
	{^{if (generatedReport && !(generatedReport).reportStatus) || (generatedReport && (generatedReport).reportStatus && (generatedReport).reportStatus !== "PENDING") || (!generatedReport) }}
		<div class="contentArea viewDetails newReport" data-link="data-id{>_id} data-regardingId{>regardingId}}">
			<div class="content">
				<h3 class="greenBackground">Create New "{^{>name}}" Report {^{if itemName}} For "{^{>itemName}}"{{/if}}</h3>

				<p class="marginTop10">{^{:description}}</p>

				<div class="alert warning">
					<div class="glyphicons glyphicons-warning-sign white pull-left"></div>
					<div class="pull-left message">When you generate a new report, any previously run reports are overwritten.</div>
					<div class="clearFix"></div> 
				</div>
				<p>
					Click ‘Generate Report’ and you will be notified when it’s ready. Return to this page to view it.
				</p>
				<p>

				</p>
				{^{if pdfEnabled && csvEnabled}}
				<div class="checkboxContainer">
					<input id="generatePdf" class="letter" type="checkbox">
					<label for="generatePdf">Generate PDF</label>
				</div>
				{{/if}}
				{^{if pdfEnabled && !csvEnabled}}
					<input id="generatePdf" class="letter hidden" type="checkbox" checked="checked">
				{{/if}}
				<p></p>
				{^{if dateRange === '1'}}
					<div class="pull-left">
						<label for="dateFrom" class="margin-right-5">From </label><input type="text" id="dateFrom" class="datepicker" placeholder="From Date">
					</div>
					<div  class="pull-left margin-left-20">
						<label for="dateTo" class="margin-right-5">To </label><input type="text" id="dateTo" class="datepicker" placeholder="To Date">
					</div>
				{{/if}}

				{^{if singleDay === '1'}}
					<div class="pull-left">
						<label for="dateSelection" class="margin-right-5">Date </label><input type="text" id="dateSelection" class="datepicker" placeholder="Selection Date">
					</div>
				{{/if}}

				<button type="button" class="positive btn btn-primary pull-right margin-left-30" id="createReport">Generate Report</button>
				<br class="clearFix"/>
			</div>
		</div>
	{{/if}}
	{^{if generatedReport && (generatedReport).reportStatus === "PENDING"}}
	<div class="contentArea viewDetails reportPending">
		<h3 class="greenBackground">{^{>name}} {^{if itemName}} For "{^{>itemName}}"{{/if}}</h3>
		<h4>Report requested <span data-link="data-ts{>reportRequestedTimestamp}"></span></h4>
		<div class="alert warning">
			<div class="glyphicons glyphicons-warning-sign pull-left"></div>
			<div class="pull-left message">
				<span>
					Your report is being generated.
				</span>
			</div>
			<div class="clearFix"></div>
		</div>
	</div>
	{{/if}}

	{^{if columns && columns.length > 0}}
		<div>
			<h3>Columns in the report</h3>
			<ul>
				{^{for columns}}
				<li class="marginBottom5">
					{^{>#data}}
				</li>
				{{/for}}
			</ul>
		</div>
	{{/if}}
</div>

{{/for}}