1  <section id="main" class="wrapper style2">
 2      <div class="inner">
 3          <header class="major special col-8">
 4              <h1>{{ display_name }}</h1>
 5              {{# properties }}
 6              {{# image }}
 7              <div class="image right"><img src="{{ . }}" /></div>
 8              {{/ image }}
 9              {{^ image }}
10              <div class="image right"><img src="{{ static }}images/cred.png" /></div>
11              {{/ image }}
12              <p>{{ description }}</p>
13              <br>
14              {{# phone }}
15              <a class="button icon solid fa-phone" href="tel:{{ . }}">Phone</a>
16              {{/ phone }}
17              {{# site }}
18              <a class="button icon solid fa-globe" target="_blank" href="{{ . }}">Website</a>
19              {{/ site }}
20              {{# email }}
21              <a class="button icon solid fa-envelope" href="mailto:{{ . }}">Mail</a>
22              {{/ email }}
23              {{# latitude }}
24              <a 
25                  class="button icon solid fa-map-marker-alt" 
26                  data-lat={{latitude}} 
27                  data-lng={{longitude}} 
28                  data-name="{{place.name}}" 
29                  æ-open-map>
30                  Open in Map
31              </a>
32              {{/ latitude }}
33              {{/ properties }}
34          </header>
35  
36          <div class="row" style="clear: both">
37              <div class="col-7 col-12-small">
38                  <h3>Upcoming Events</h3>
39                  <div hx-get="{{ url }}upcoming" hx-trigger="revealed"></div>
40              </div>
41              <div class="col-5 col-12-small">
42                  <br>
43                  <table>
44                      <thead><tr><th>Day</th><th>Hours of Operation</th></tr></thead>
45                      <tbody>
46                      {{# place.open.hours }}
47                      <tr><td>{{ day }}</td><td>{{range}}</td></tr>
48                      {{/ place.open.hours }}
49                      {{^ place.open.hours }}
50                      <tr><td></td><td>No Hours Available</td></tr>
51                      {{/ place.open.hours }}
52                      </tbody>
53                  </table>
54              </div>
55          </div>
56      </div>
57  </section>
58  <style>
59      .actions {
60          margin-top: 1em;
61      }
62  
63      header > .button {
64          margin-right: 1em;
65          padding-left: 1em;
66          padding-right: 1em;
67          margin-bottom: 1em;
68      }
69  
70      table {
71          margin-top: 3em;
72      }
73  </style>
74  <script>
75      const mapButton = æ('open-map')
76      mapButton && mapButton.listen('click', (e) => {
77          const lat = mapButton.dataset.lat
78          const lng = mapButton.dataset.lng
79          æ('mapModal').unmute()
80          L.modalMap.flyTo([lat, lng], 16)
81      })
82  </script>