Vue.component('pdc-arv-ph-overview', {
	template:
		'<div>' +
			'<el-row>' +
				'<h1 style="text-align: center">Proportion of Days Covered: Antiretroviral Medications (Pharmacy) (PDC-ARV-PH)</h1>' +
			'</el-row>' +
			'<el-row id="pdc-arv-ph-description" class="scrollspy">' +
				'<h2>Description</h2>' +
			'</el-row>' +
			'<el-row>' +
				'<p>The percentage of individuals attributed to the pharmacy &ge;18 years of age who met the Proportion of Days Covered (PDC) threshold of 90% for &ge;3 antiretroviral medications during the measurement year.</p>' +
				'<p>A higher rate indicates better performance.</p>' +
			'</el-row>' +
			'<el-row id="pdc-arv-ph-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.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Data Sources</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Prescription claims data.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Denominator</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Individuals who filled a prescription for &ge;3 distinct ARVs (as a single agent or as a combination) each with 2 different dates of service during the measurement year.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Exclusions</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Hospice.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Numerator</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Individuals who met the PDC threshold of 90% during the measurement year.</p>' +
				'</el-col>' +
			'</el-row>' +
			'<el-row>' +
				'<el-col :span="6">' +
					'<p><b>Attribution</b></p>' +
				'</el-col>' +
				'<el-col :span="18">' +
					'<p>Individuals are attributed to the pharmacy with &ge;51% of the days\' supply for all of the individual\'s prescription claims involving a target medication. </p>' +
				'</el-col>' +
			'</el-row>' +
		'</div>'
});

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


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

Vue.component('pdc-arv-ph-faqs', {
	template: 
		'<div>' +
			'<el-row id="pdc-arv-ph-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('pdc-arv-ph', {
	template:
		'<div id="pdc-arv-ph" class="search-filter inview">' +
			'<pdc-arv-ph-overview></pdc-arv-ph-overview>' +
            '<pdc-arv-ph-rationale v-if="rationale"></pdc-arv-ph-rationale>' +
			'<pdc-arv-ph-faqs v-if="faqs"></pdc-arv-ph-faqs>' +
			'<br><br><br><br>' +
		'</div>',
	props: {
		rationale: {
			default: false
		},
		faqs: {
			default: false
		}
	}
});