<div id="tabs-2" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="font-family: Arial, sans-serif !important;">
<!-- Care options - Begin -->
<div class="careOptionsContainer">
<div class="filterOptions">
<div class="section">
<div class="row">
<p>
<span>Condition</span><a href="#" class="qMark" title="Select a Condition to Show Related Treatments & Tests in Care Options Panel."></a>
</p>
</div>
<select data-sly-list.key="${model.conditionPagePaths}" class="input" id="condition_input"
style="font-size:1em;color:#555555;font-size:14px;" onchange="conditionChange()">
<option value="${key@ context='html'}">${key@ context='html'}</option>
</select>
</div><!-- end section -->
<div class="section">
<p>
<span>Input</span><a href="#" class="qMark" title="Insert or Select Inputs Below to Identify Related Treatments and Tests in Care Options Panel."></a>
</p>
<div class="row">
<p style="font-weight:bold">
Age
</p>
<input type="text" class="txtBoxSmall care-option-input" id="input-age">
</div>
<div class="row">
<p>
<span>Impact to Daily Activity</span><a href="#" class="qMark" title="Daily Activities Examples: Eating, Sleeping, Driving, Walking, Working, Personal Hygiene etc."></a>
</p>
<select id="input-impact" class="care-option-input" style="font-size:1em;color:#555555;width:95%;margin-top: 2%;">
<option value="empty" title="Choose Options Below">Choose Options Below</option>
<option value="none" title="None: Impacts None">None: Impacts None</option>
<option value="low" title="Low: Impacts 1 Daily Activity">Low: Impacts 1 Daily Activity</option>
<option value="moderate" title="Moderate: Impacts 2-3 Daily Activities">Moderate: Impacts 2-3 Daily Activities</option>
<option value="high" title="High: Impacts 4-5 Daily Activities">High: Impacts 4-5 Daily Activities</option>
</select>
</div>
<div class="row">
<p style="font-weight:bold">
Length of Time With Condition
</p>
<br>
<input type="text" class="txtBoxSmall care-option-input" id="input-lengthOfCondition">
<select id="input-lengthOfConditionUnit" class="care-option-input" style="font-size:1em;color:#555555;width:40%;">
<option>Days</option>
<option>Weeks</option>
<option>Months</option>
<option>Years</option>
</select>
</div>
</div> <!-- end section -->
<div class="section">
<p>
<span>Filter</span><a href="#" class="qMark" title="Treatments & Tests That Don't Match Below Filters Will be Faded Out in Care Options Panel."></a>
</p>
<div class="row">
<p>
<span>Treatments &Tests Type</span><a href="#" class="qMark" title="Self-Care - Done by Oneself at Home Performed Independently by an Individual Without Medical Supervision or Prescription
Medication - Use of Over-The-Counter or Prescription Meds
Conventional tests - Tests Commonly Used by Care Providers
Conventional treatments - Treatments Commonly Used by Care Providers
Complimentary - Non-Mainstream Treatments Used Together with Conventional Medicine"></a>
</p>
<br>
<!-- Multiselect drop down list - Begin -->
<select id="type1" multiple="multiple" size="5" class="care-option-filter" style="display: none;">
<option value="All">All</option>
<option value="Self Care">Self-Care</option>
<option value="Complementary">Complementary</option>
<option value="Medication">Medications</option>
<option value="Conventional Test">Conventional Tests</option>
<option value="Conventional Treatment">Conventional Treatments</option>
</select>
<!-- Multiselect drop down list - Ends -->
</div>
<div class="row">
<p>
<span>Clinically Proven</span><a href="#" class="qMark" title=" All - Will Reflect All Treatments & Tests, Whether Clinically Proven or Not
Yes - Shows Results That are Clinically Proven, as Validated in Numerous Studies
Insufficient - Not Enough Evidence to Determine Proven Status
No - Shows Results That are Unproven and Have Been Found to Be Ineffective and/or Unsafe"></a>
</p>
<br>
<!-- Multiselect drop down list - Begin -->
<select id="type2" multiple="multiple" size="5" class="care-option-filter" style="display: none;">
<option value="All">All</option>
<option value="Yes">Yes</option>
<option value="Insufficient Evidence">Insufficient</option>
<option value="No">No</option>
</select>
<!-- Multiselect drop down list - Ends -->
</div>
<div class="row">
<p>
<span>Cost</span><a href="#" class="qMark" title="$ - Lower Cost $0-$250
$$ - Medium Cost $250-$500
$$$ - Higher Cost $500-$2000
$$$$ - Very Costly $2000+"></a>
</p>
</div>
<div class="row">
<!-- Slider - Begin -->
<!-- Jquery onload function builds sliders from these divs -->
<div id="slider-range1"></div>
<div id="legend1"></div>
<!-- Slider - Ends -->
</div>
<div class="row">
<p class="text">
<span>Time To Complete Treatments & Tests<a href="#" class="qMark" title="Low - Same-day, Single Event
Medium - 1 to 2 Days
High - 3 Days or more"></a>
</span>
</p>
</div>
<div class="row">
<!-- Slider - Begin -->
<!-- Jquery onload function builds sliders from these divs -->
<div id="slider-range2" ></div>
<div id="legend2"></div>
<!-- Slider - Ends -->
</div>
</div><!-- end section -->
</div>
<div class="filterResults">
<div class="titleBox">
<p id="care-options-title">
<sly data-sly-test="${!properties.checkConditionPage && properties.checkTreatmentPage && !properties.checkPreventiveCarePage && !properties.checkRightCarePage}">
${properties.conditionNameForTreatment @ context='html'}
</sly>
<sly data-sly-test="${properties.checkConditionPage && !properties.checkTreatmentPage && !properties.checkPreventiveCarePage && !properties.checkRightCarePage}">
${properties.conditionName @ context='html'}
</sly>
</p>
<button type="button" class="showCheckBox" style="font-size:14px;">
Compare Options
</button>
</div>
<div class="showCompare">
Please select the Treatments & Tests to be compared (up to 3)
<button type="button" class="" id="cancel-compare-tool">
Cancel
</button>
<button type="button" id="compare-selected" class="">
Compare Selected
</button>
</div>
<div class="care-options-sorting-note">Note: Treatments and tests are displayed alphabetically</div>
<div class="compare-tool-error-wrapper"><div class="compare-tool-error"></div>
</div>
<!-- end Care options container -->
<div class="compareTableContainer" id="care-options-table-container">
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height" class="header">
<td>Home</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsHomeList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="Home-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height-two" class="header">
<td>Early</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsEarlyList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="Early-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height-three" class="header">
<td>More Advanced</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsMoreAdvancedList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="MoreAdvanced-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height-four" class="header">
<td>Surgery</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsSurgeryList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="Surgery-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<!-- legend box is used to swap the content of legend for hide/show -->
<div id="legendBox" class="legendContainer ui-draggable">
<table class="legendTable">
<tbody><tr id="trheight" class="title">
<td colspan="2"><span style="cursor: move;">Key for Treatments & Tests (<span id="hideLegendLink" onclick="hideLegend()"> Hide</span>)</span></td>
</tr>
<tr id="trheightOne">
<td class="greenLight"> </td>
<td>May Fit Well Based on Inputs</td>
</tr>
<tr>
<td class="orange"> </td>
<td>Questionable Based on Inputs</td>
</tr>
<tr>
<td class="grey"> </td>
<td>Likely Does Not Fit Based on Inputs</td>
</tr>
<tr>
<td class="white"> </td>
<td>Removed Due to Filter Selection</td>
</tr>
</tbody></table>
</div>
<div id="legend" class="legendContainer" style="display: none">
<table class="legendTable">
<tbody><tr id="trheight" class="title">
<td colspan="2"><span style="cursor: move;">Key for Treatments & Tests (<span id="hideLegendLink" onclick="hideLegend()"> Hide</span>)</span></td>
</tr>
<tr id="trheightOne">
<td class="greenLight"> </td>
<td>May Fit Well Based on Inputs</td>
</tr>
<tr>
<td class="orange"> </td>
<td>Questionable Based on Inputs</td>
</tr>
<tr>
<td class="grey"> </td>
<td>Likely Does Not Fit Based on Inputs</td>
</tr>
<tr>
<td class="white"> </td>
<td>Removed Due to Filter Selection</td>
</tr>
</tbody></table>
</div><!-- end legend container -->
<div id="hiddenLegend" class="legendContainer" style="display: none">
<b><span id="hiddenLegendBox">Click to drag (<span id="showLegendLink" onclick="showLegend()" style="width:inherit">Show Legend</span>)</span></b>
</div>
</div>
<!-- end compareTableContainer -->
<div class="tableCompareWrapper" style="display:none" id="table-compare">
<div> <a id="addReport" class="addToReport" href="#table-compare">Add To Report</a>
<button type="button" id="back-to-care-option" class="" style="display:none;font-size:14px;">
Return To Care Option
</button>
</div>
<!-- javascript will use this table to generate the compare view table -->
<table class="tableCompare" id="compareTable">
</table>
</div>
</div>
</div>
<!-- Care options - Ends -->
</div>
