@model IEnumerable<FirstThreeDoctorsViewModel>

@{
    ViewData["Title"] = "Doctors";
}

<section style="background-color: rgba(255, 255, 255, 0.5);padding-top:50px" class="doctor_section layout_padding">
    <div class="container">
        <div class="heading_container heading_center">
            <h2 style="margin-top: 1em">
                Our Doctors
            </h2>
            <div style="padding:0" class="alert alert-primary" role="alert">
            <h4 class="alert-heading">To make doctors appointment, create account as PATIENT! </h4>
            </div>
            <p class="col-md-10 mx-auto px-0">
                "I have nothing but great things to say, from consultation, to surgery, to follow-ups. I was in great hands and am grateful"
            </p>
            <p class="col-md-10 mx-auto px-0">
                "Seeing a doctor is always a stressful activity, regardless of the circumstances.
                Simple Clinic doctors puts you at ease immediately, he is concise in his diagnosis and explains medical terminology in easy-to-understand language."
            </p>
        </div>
        <div class="row">
            
                @foreach (var doctor in Model)
                {
                <div class="col-sm-6 col-lg-4 mx-auto">
                    <div class="box">
                        <div class="img-box">
                            <img src="~/img/profiles/@doctor.ProfilePictureFilename" alt="Picture">
                        </div>
                        <div class="detail-box">
                            <div class="social_box">
                                <a asp-controller="Home" asp-action="DoctorDetails" asp-route-id="@doctor.Id" class="btn btn-outline-primary">Details</a>
                            </div>
                            <h5>
                                @doctor.FirstName @doctor.LastName
                            </h5>
                            <h6 class="">
                                Doctor
                            </h6>
                            <h6 class="">
                                @doctor.Speciality
                            </h6>
                        </div>
                    </div>
                </div>
                }
        </div>
    </div>
</section>