?>

<style>
    /* Social feed */
    .social-feed-separated .social-feed-box {
        margin-left: 62px;
    }
    .social-feed-separated .social-avatar {
        float: left;
        padding: 0;
    }
    .social-feed-separated .social-avatar img {
        width: 52px;
        height: 52px;
        border: 1px solid #e7eaec;
    }
    .social-feed-separated .social-feed-box .social-avatar {
        padding: 15px 15px 0 15px;
        float: none;
    }
    .social-feed-box {
        /*padding: 15px;*/
        border: 1px solid #e7eaec;
        background: #fff;
        margin-bottom: 15px;
    }
    .article .social-feed-box {
        margin-bottom: 0;
        border-bottom: none;
    }
    .article .social-feed-box:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid #e7eaec;
    }
    .article .social-feed-box p {
        font-size: 13px;
        line-height: 18px;
    }
    .social-action {
        margin: 15px;
    }
    .social-avatar {
        padding: 15px 15px 0 15px;
    }
    .social-comment .social-comment {
        margin-left: 45px;
    }
    .social-avatar img {
        height: 40px;
        width: 40px;
        margin-right: 10px;
    }
    .social-avatar .media-body a {
        font-size: 14px;
        display: block;
    }
    .social-body {
        padding: 15px;
    }
    .social-body img {
        margin-bottom: 10px;
    }
    .social-footer {
        border-top: 1px solid #e7eaec;
        padding: 10px 15px;
        background: #f9f9f9;
    }
    .social-footer .social-comment img {
        width: 32px;
        margin-right: 10px;
    }
    .social-comment:first-child {
        margin-top: 0;
    }
    .social-comment {
        margin-top: 15px;
    }
    textarea.form-control {
        height: auto;
    }
    .form-control, .single-line {
        background-color: #FFFFFF;
        background-image: none;
        border: 1px solid #e5e6e7;
        border-radius: 1px;
        color: inherit;
        display: block;
        padding: 6px 12px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        width: 100%;
        font-size: 14px;
    }
    .feed-element, .media-body {
        overflow: hidden;
    }
</style>
<div class="page-heading" style="margin:-25px 0 25px 0;" data-id="{{ $host->user_id }}">
    <div class="media clearfix">
        <div class="media-left pr30" style="width:50%; text-align: center;vertical-align: middle;" >
            @if(!empty($host->inputFile_FamilyGroupPhoto))
                <img class="media-object mw150" src="{{ $host->inputFile_FamilyGroupPhoto }}" style="width:50%;">
            @endif
        </div>
        <div class="media-right">
        <h2 class="media-heading fw700 fs24" style="position:relative;">
                 {{ $host->user->lastname }}'s Family <br />
			<span class="light-text fw300">
			({{ $host->user->email }})
			</span>
		</h2>
		<div class="row" style="font-size:16px;">
		<div class="col-md-12 mt10">
                    <span style="color:#aaa;">city :</span>
                    <span style="color:#666;">{{ $host['inputCity'] }} </span>
        </div>
                                    
        <div class="col-md-12 mt10">
                    <span style="color:#aaa;">state :</span>
                    <span style="color:#666;">{{  $host['selectAddrState'] }}</span>
        </div>
        <div class="col-md-12 mt10">
                    <span style="color:#aaa;">zipcode :</span>
                    <span style="color:#666;">{{ $host['inputZipCode'] }}</span>
        </div>
        <div class="col-md-12 mt10">
                    <span style="color:#aaa;">Languages : </span>
                    <span style="color:#666;">@foreach ($ar_language_list as $key => $value)
                                        @if($key != 0),@endif {{$value}}
                                    @endforeach</span>
         </div>
         <div class="col-md-12 mt10">
                    <span style="color:#aaa;">Number of Children: </span>
                    <span style="color:#666;">{{ $host['selectNumberOfChildren'] }}</span>
         </div>
         <div class="col-md-12 mt10">
                    <span style="color:#aaa;">Ethnic Background(s): </span>
                    <span style="color:#666;">@foreach ($ar_ethnic_background_list as $key => $value)
                                        @if($key != 0),@endif {{$value}}
                                    @endforeach</span>
         </div>
         
		</div>	
        </div>
        
        <div style="margin-top:3%;">
            <h2 class="media-heading fw700 fs24" style="position:relative;">
           

                <div style="position:absolute;top:0;right:0;">
                </div>
            </h2>


            <div class="row" style="font-size:16px;">
            	<div class="col-md-6 mt10">
                    <span style="color:#aaa;">Near :</span>
                    <span style="color:#666;">{{ $host['selectEduSchoolList'] }}</span>
                </div>
                <div class="col-md-6 mt10">
                    <span style="color:#aaa;">Bedroom :</span>
                    <span style="color:#666;">{{$host['inputBedNo']}}</span>
                </div>
              <div class="col-md-6 mt10">
                    <span style="color:#aaa;"> Distance:</span>
                    <span style="color:#666;"> {{ $host['selectDistSchool'] }} min.</span>
                </div>
                <div class="col-md-6 mt10">
                    <span style="color:#aaa;">Bathroom : </span>
                    <span style="color:#666;">{{$host['inputBathNo']}}</span>
                </div>
                  <div class="col-md-6 mt10">
                    <span style="color:#aaa;"> Transportation:</span>
                    <span style="color:#666;">@foreach ($ar_trans_list as $key => $value)
                                        @if($key != 0),@endif {{$value}}
                                    @endforeach</span>
                </div>
                <div class="col-md-6 mt10">
                    <span style="color:#aaa;"></span>
                    <span style="color:#666;"></span>
                </div>
               	<div class="col-md-12 mt10">
                    <span style="color:#aaa;">Household Pets : </span>
                    <span style="color:#666;"> {{ ($host['selectDogNo']=='')?'0':$host['selectDogNo'] }} dogs, {{ ($host['selectCatNo']=='')?'0':$host['selectCatNo']  }} cats, {{ ($host['selectOtherPetsNo']=='')?'0':$host['selectOtherPetsNo']  }} other pets</span>
                </div>
                <div class="col-md-12 mt10">
                    <span style="color:#aaa;">student has access: </span>
                    <span style="color:#666;">@foreach ($ar_amenities_list as $key => $value)
                                        @if($key != 0),@endif {{$value}}
                                    @endforeach</span>
                </div>
                <div class="col-md-12 mt10">
                    <span style="color:#aaa;">student’s bedroom:</span>
                    <span style="color:#666;">@foreach ($ar_stdbedroom_list as $key => $value)
                                        @if($key != 0),@endif {{$value}}
                                    @endforeach</span>
                </div>
                <div class="col-md-6 mt10">
                    <span style="color:#aaa;">Family Activities :</span>
                    <span style="color:#666;"> @foreach ($ar_activities_list as $key => $value)
                                        @if($key != 0),@endif {{$value}}
                                    @endforeach</span>
                </div>
                  <div class="col-md-6 mt10">
                    <span style="color:#aaa;"></span>
                    <span style="color:#666;"></span>
                </div> 
                <!-- Louis for hiding Flyer Download as a Local Coordinator
                <div class="col-md-12 mt12" style="text-align:center; margin-top:15px;">
                   <a href="/host/{{$host->user_id}}/flyer"><button class="btn btn-primary btn-lg">flyer download</button></a>
                </div>
-->                
                
            
                
            </div>
        </div>
    </div>
</div>