Patient Selection Box

Description: The patient selection box appears once a user selects a patient from the patient list. The purpose of the patient selection box is for the user to confirm if the patient that was selected is the correct patient.

508 Guidelines: The patient image should include an alt attribute that says the name of the patient.

Eight, Patient

Eight, Patient
This table contains the patient's selected date of birth, age, gender and social security number.
DOB: 04/07/1935
Age: 80y
Gender: Male
SSN: 666-00-0008

Patient Selection Box with Warning

Eight, Patient

WandererCategory II (LOCAL)

This patient likes to wander around the hospital. Please notify the security office

This table contains the patient's selected PII; the date of birth, age, gender and social security number.
Initial Assigned Date: 12/23/2014 16:00
Approved by: PROGRAMMER,EIGHT
Assignment Status: ACTIVE
Owner Site: CAMP MASTER
Originating Site: CAMP MASTER 
<div class="patient-selection-container">
	<div class="row">
    	<div class="col-md-12">
        	<h1 class="text-center">Eight, Patient</h1>
            <div class="btn-sm help-icon">
                <a id="linkHelp-patient_search_confirm" class="help-icon-link" href="#"> 
                <i class="fa fa-question-circle fa-lg" title="Learn about accessing an unrestricted patient record">
                </i></a>
            </div>
        </div>
    </div>
	<div class="row patientInfo">
        <div class="col-md-5">
            <img src="img/sample-patient-img.jpg" class="center-block" 
            alt="Eight, Patient" width="100" height="100" />
        </div>
        <div class="col-md-7">
        <table>
        <caption class="sr-only">This table contains the patient's selected PII; the date of birth, 
        age, gender and social security number.</caption>
            <tbody> 
                <tr> 
                    <th scope="row">DOB:</th>
                    <td>04/07/1935</td>
                </tr>
                <tr> 
                    <th scope="row">Age:</th>
                    <td>80y</td>
                </tr>
                <tr> 
                    <th scope="row">Gender:</th>
                    <td>Male</td>
                </tr>
                <tr> 
                    <th scope="row">SSN:</th>
                    <td>666-00-0008</td>
                </tr>
            </tbody> 
        </table>
        </div>
    </div>
    <div class="row">
    	<div class="col-md-12">
        	<button type="button" class="btn btn-default btn-block" 
            title="Please confirm this is the patient you want to select.">Confirm Selection</button>
        </div>
    </div>
</div>
            
<div class="patient-selection-container">
	<div class="row">
    	<div class="col-md-12">
        	<h1 class="text-center">Eight, Patient</h1>
            <div class="btn-sm help-icon">
                <a id="linkHelp-patient_search_confirm" class="help-icon-link" href="#"> <i class="fa fa-question-circle fa-lg" 
                title="Learn about accessing an unrestricted patient record"></i></a>
            </div>
        </div>
    </div>
	<div class="row patientInfo">
        <div class="col-md-12 panel-danger">
            <h2>Wanderer<span class="label label-warning pull-right">Category II (LOCAL)</span></h2>
            <p><strong>This patient likes to wander around the hospital. Please notify the security office.</strong></p>
            <hr />
            <table>
            <caption class="sr-only">This table contains warning information about the selected patient.
            </caption>
                <tbody> 
                    <tr> 
                        <th scope="row">Initial Assigned Date:</th>
                        <td>12/23/2014 16:00</td>
                    </tr>
                    <tr> 
                        <th scope="row">Approved by:</th>
                        <td>PROGRAMMER,EIGHT</td>
                    </tr>
                    <tr> 
                        <th scope="row">Assignment Status:</th>
                        <td>ACTIVE</td>
                    </tr>
                    <tr> 
                        <th scope="row">Owner Site:</th>
                        <td>CAMP MASTER</td>
                    </tr>
                    <tr> 
                        <th scope="row">Originating Site:</th>
                        <td>CAMP MASTER</td>
                    </tr>
                </tbody> 
            </table>
        </div>
    </div>
    <div class="row">
    	<div class="col-md-12">
        	<button type="button" class="btn btn-default btn-block" title="Please confirm this is the patient you want to select.">Confirm
            </button>
        </div>
    </div>
</div>