@extends('layouts.master')
@section('title', 'Patient Ambassador Program | Myositis India – Voices of Strength & Advocacy')
@section('description', 'Explore the Patient Ambassador Program and how patients are helping raise awareness.')
@section('canonical', 'https://www.myositisindia.org/myositis-india/patient/ambassdor')
@section('content') 

<div class="container">

    <section id="content">	

        <!-- Page Heading -->

        <section class="section page-heading animate-onscroll">

            <h5> Patient Ambassador Details </h5>

            <p class="breadcrumb"><a href="{{ route('home') }}">Home</a> /  Patient Ambassador / {{ $ambassador->name }}</p>

        </section>

        <!-- Page Heading -->

        

        <!-- Section -->

        <section class="section full-width-bg gray-bg">

            <div class="row">

                <div class="col-lg-9 col-md-9 col-sm-8">

                     <!-- Google Translate Code -->

 <div id="google_translate_element"></div>

 <script type="text/javascript">

     function googleTranslateElementInit() {

         new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false }, 'google_translate_element');

     }

 </script>

 <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

                    <div class="card mb-3">

                        <div class="card-body d-flex">

                            <img src="{{ asset(Storage::url($ambassador->image)) }}" alt="" class="img-fluid" style="width: 340px; height: 310px; float: left; margin-right: 20px;">

                            <div>

                                <h4 class="card-title"> Patient Ambassador Name: <span style="color: #274472;"> <b> {{ $ambassador->name }} </b> </span> </h4>

                                <p class="card-text" style="text-align: justify">{{ $ambassador->message }}</p>

                                <!-- Add any additional details or content for the individual ambassador page -->

                            </div>

                        </div>

                    </div>

                    @if ($ambassador->video == !null)

                        <div class="card mb-3">

                            <div class="card-body d-flex">

                                <h2 style="text-align: center" class="side-items">Listen to Our Patient Ambassador </h2>

                                <div class="embed-responsive embed-responsive-16by9">

                                    <video controls>

                                        <source src="{{ asset(Storage::url($ambassador->video)) }}" type="video/mp4">

                                        Your browser does not support the video tag.

                                    </video>

                                </div>

                                 <div>

                                     <!-- Add any additional details or content for the individual ambassador page -->

                                </div>

                            </div>

                        </div>

                    @endif

                    

                </div>

                <!-- Sidebar -->

                @include('myositis.sidebarforpages')

                <!-- /Sidebar -->

            </div>

        </section>

        

        <!-- /Section -->

    </section>

</div>

@endsection