1  {{>modal}}
  2  <section id="main" class="wrapper style2">
  3      <div class="inner">
  4          <header class="major special">
  5          	<h1>{{ title }}</h1>
  6              <ul class="row details">
  7  		{{# place.name }}
  8                  <a href="{{ place.url }}" hx-boost="false" class="icon solid fa-map-marker-alt"> {{ place.properties.name }}</a>
  9                  {{/ place.name}}
 10                  {{# start }}
 11                  <span class="icon solid fa-clock"> {{ . }}</span>
 12                  {{/ start }}
 13                  {{# host}}
 14  		<a hx-boost="false" class="icon solid fa-user-circle" href="/people/{{ name }}/"> hosted by {{ profile.display_name }}</a>
 15                  {{/ host}}
 16                  {{#price}}
 17                  <span class="icon solid fa-dollar-sign"> {{ . }}</span>
 18                  {{/price}}
 19              </ul>
 20          </header>
 21      
 22          {{# media }}
 23          <span class="image right"><img src="{{ preview }}" alt="{{ content }}" style="max-height: 25em;"/></span>
 24          {{/ media }}
 25      
 26          {{& html }}
 27      
 28          <ul class="actions">
 29          	<li><a class="button solid icon fa-chevron-left" onclick="history.back()">Back</a></li>
 30          	{{#session}}
 31  		{{#reserved}}
 32          		<li><a class="button icon primary solid fa-calendar" hx-delete="{{ address }}/rsvp" hx-swap="outerHTML">{{ . }}</a></li>
 33  		{{/reserved}}
 34  		{{^reserved}}
 35          		<li><a class="button solid icon fa-calendar" hx-put="{{ address }}/rsvp" hx-swap="outerHTML">RSVP</a></li>
 36  		{{/reserved}}
 37          	{{/session}}
 38          </ul>
 39  
 40  	<ul id="rsvps">
 41  		{{#rsvps}}
 42  		<li>{{ author.profile.display_name }}: {{status}}</li>
 43  		{{/rsvps}}
 44  	</ul>
 45  
 46  	{{#auth}}
 47  	<details>
 48  		<summary>Author Actions</summary>
 49          	<ul class="actions">
 50  			<li><a class="button solid icon fa-edit" hx-put="{{ address }}/event" hx-target="dialog" hx-swap="innerHTML">Edit</a></li>
 51  			<li><a class="button solid icon fa-copy" hx-post="{{ address }}/duplicate" hx-vals='{"weeks": 1}' hx-swap="outerHTML">Duplicate</a></li>
 52  			<li><a class="button solid icon fa-trash" 
 53  					hx-confirm="Delete this event?" 
 54  					hx-delete="{{ address }}/event" 
 55  					hx-swap="outerHTML"
 56  					>Delete</a></li>
 57          	</ul>
 58  	</details>
 59  	{{/auth}}
 60  	
 61          <hr style="clear: both">
 62          <span 
 63              hx-get="{{ address }}/comments" 
 64              hx-trigger="load" 
 65              hx-swap="outerHTML"
 66              hx-indicator="#comments_spinner"
 67          </span>
 68          <img id="comments_spinner" class="htmx-indicator" src="{{ static }}images/loading.svg" />
 69      </div>
 70  </section>
 71  <style>
 72  .major {
 73      margin-bottom: 0 !important;
 74      padding-bottom: 0 !important;
 75  }
 76  
 77  .details {
 78      font-size: 1.3rem;
 79      justify-content: flex-start !important;
 80      margin-bottom: 1em;
 81  }
 82  
 83  .details > *::before {
 84      width: 1.5em;
 85      text-align: center;
 86  }
 87  
 88  @media screen and (max-width: 500px) {
 89      .details {
 90          flex-direction: column;
 91      }
 92  }
 93  
 94  .major .row {
 95      justify-content: space-between;
 96  }
 97  
 98  .about.actions li {
 99      text-align: left !important;
100      padding-top: 0 !important;
101  }
102  
103  a.author {
104      margin: 0.5em;
105      margin-left: 0;
106      padding: 0.5em;
107      padding-left: 0;
108      display: flex;
109      gap: 1em;
110      justify-content: start;
111      align-items: center;
112      flex-direction: row;
113      border-bottom: none;
114      text-decoration: none;
115  }
116  
117  .author > * {
118      margin: 0;
119  }
120  
121  .htmx-indicator{
122      opacity:0;
123      width: 3em;
124      transition: opacity 500ms ease-in;
125  }
126  .htmx-request .htmx-indicator{
127      opacity:1;
128  }
129  .htmx-request.htmx-indicator{
130      opacity:1;
131  }
132  </style>