<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pharmacy Recommendation System</title>
    <!--부트스트랩 css 추가-->
    <link rel="stylesheet" href="/css/lib/bootstrap.min.css">

    <style>
        .grid-image, .h2-title{
            display: flex;
            justify-content: center;
        }
        img {
            margin: 0 0 5px;
            width: 70%;
            height: 550px;
        }
    </style>
</head>
<body>
<div>
    <h2 class="h2-title">Pharmacy Recommendation Results</h2>
</div>

<table class="table table-hover">
    <tr>
        <th>약국명</th>
        <th>약국 주소</th>
        <th>거리</th>
        <th>길안내 링크</th>
        <th>로드뷰 링크</th>
    </tr>
    {{#each outputFormList}}
        <tr>
            <td>{{pharmacyName}}</td>
            <td>{{pharmacyAddress}}</td>
            <td>{{distance}}</td>
            <td><a href="{{directionUrl}}">{{directionUrl}}</a></td>
            <td><a href="{{roadViewUrl}}">{{roadViewUrl}}</a></td>
        </tr>
    {{/each}}
</table>
<div class="grid-image">
    <img src="/images/kakao.png" alt="kakao" class="img-responsive img-rounded">
</div>
<script src="/js/lib/jquery.min.js"></script>
<script src="/js/lib/bootstrap.min.js"></script>

</body>
</html>