<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact us</title>

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="general-arthur.css">
    <script src="/contact.js"></script>
    <script src="/GroupProFunct.js"></script>
</head>
<body>
    <%- include('../components/header.ejs') %> 

    <img src="/neuschwanstein.jpg" alt="Castle background" class="background" style="z-index: -2;">

    <div class="content">

        <div class="frame-body" style="width: 30%;">
            <div class="frame-top"></div>
            <div class="frame-content">                
                <h3>Visit our office!</h3>
                <p>We are located at:</p>
                <p><%= agencies[0].AgncyAddress %>, <%= agencies[0].AgncyCity %>, <%= agencies[0].AgncyProv %></p>
                <div id="map"></div>
            </div>
        </div>

        <div class="frame-body" style="width: 50%;">
            <div class="frame-top"></div>
            <div class="frame-content">
                <h3>How to reach us!</h3>
                <div style="padding: 30px;">
                    <% for(let i=0; i<agencies.length; i++){ %> 
                        <% var agency=agencies[i]; %> 
                        <h4><%= agency.AgncyCity %>, <%= agency.AgncyProv %> </h4>
                        <p>Address: <%= agency.AgncyAddress %>, <%= agency.AgncyPostal %> </p>
                        <p>Phone: <%= agency.AgncyPhone %> </p>
                        <h5>Agents: </h5>
                        <ul style="margin-left: 2%;">
                            <% for(let i=0; i<agents[agency.AgencyId].length; i++){ %> 
                                <% var agent = agents[agency.AgencyId][i] %> 
                                <li>
                                    <h6><%= agent.AgtFirstName %> <%= agent.AgtLastName %></h6>
                                    <ul style="margin-left: 2%;">
                                        <li>Phone: <%= agent.AgtBusPhone %></li>
                                        <li>Email: <%= agent.AgtEmail %></li>
                                    </ul>
                                </li>                                
                            <% } %>
                        </ul>
                    <% } %> 
                </div>
            </div>
        </div>


    </div>

    <%- include('../components/footer.ejs') %> 
    <!-- API key is restricted to google maps-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvwkoYb8t6T2XwaoyV4HoKcvviJHH4eYs&callback=initMap&v=weekly" defer></script>
</body>
</html>