Vue.component('pmn-overview', {
	template:
		'<div>' +
			'<el-row>' +
				'<h1 style="text-align: center">Primary Medication Nonadherence (PMN)</h1>' +
			'</el-row>' +
			'<el-row id="pmn-description" class="scrollspy">' +
				'<h2>Description</h2>' +
			'</el-row>' +
			'<el-row>' +
				'<p>The percentage of prescriptions for chronic medications e-prescribed by a prescriber and not obtained by the patient in the following 30 days.</p>' +
				'<p>A higher rate indicates better performance.</p>' +
			'</el-row>' +
			'<el-row id="pmn-add-info" class="scrollspy">' +
				'<h2>Additional Information</h2>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Intended Use</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Performance measurement for pharmacies and networks of pharmacies.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Data Sources</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>E-Prescription data.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Denominator</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>The number of e-prescriptions for newly initiated drug therapy for a chronic medication during the measurement period and for the eligible population.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Exclusions</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<ul>' +
						'<li>Prescriptions where there is a prescription dispensing record in the preceding 180 days for the same drug</li>' +
						'<li>OTC medications</li>' +
						'<li>Duplicate medications, defined as any medication that has been e-prescribed twice in a 30-day period with no prescription fill in between the e-prescriptions</li>' +
					'</ul>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Numerator</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>The number of e-prescribing transactions in the denominator where there was no pharmacy dispensing event that matched the patient and the prescribed drug or appropriate alternative drug within 30 days following the e-prescribing event.</p>' +
				'</el-col>' +
			'</el-row>' +
		'</div>'
});

Vue.component('pmn-ref-1', {
  template: 
    '<el-popover placement="top-start" width="400" trigger="hover">' +
      '<span></span>' +
      '<sup slot="reference">1</sup>' +
    '</el-popover>'
});


Vue.component('pmn-rationale', {
	template: 
		'<div>' +
			'<el-row id="pmn-rationale" class="scrollspy">' +
				'<h2>Rationale</h2>' +
			'</el-row>' +
			'<el-row>' +
               '<p></p>' +
			'</el-row>' +
		'</div>'
});

Vue.component('pmn-faqs', {
	template: 
		'<div>' +
			'<el-row id="pmn-faqs" class="scrollspy">' +
				'<h2>FAQs</h2>' +
			'</el-row>' +
			'<el-row>' +
				'<el-collapse v-model="active">' +
					'<el-collapse-item name="2">' +
						'<template slot="title"><span style="font-size: 15px; text-decoration: underline; height: 48px; line-height: 20px;"></span></template>' +
						"<div style='font-size: 15px;'>" +
							'<p></p>' +
					'</el-collapse-item>' +
				'</el-collapse>' +
			'</el-row>' +
		'</div>'
});

Vue.component('pmn', {
	template:
		'<div id="pmn" class="search-filter inview">' +
			'<pmn-overview></pmn-overview>' +
            '<pmn-rationale v-if="rationale"></pmn-rationale>' +
			'<pmn-faqs v-if="faqs"></pmn-faqs>' +
			'<br><br><br><br>' +
		'</div>',
	props: {
		rationale: {
			default: false
		},
		faqs: {
			default: false
		}
	}
});