<style>
  .container .event {
    padding: 20px;
    border: solid 2px #66e2d5;;
    border-radius: 3px;
    margin: 50px auto;
    box-shadow: 5px 8px 0px #ccfff9;
    font-size: 17px;
    max-width: 700px;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 145%;
  }

  .container .event-image {
    max-width: 43%;
    float: left;
    margin-right: 20px;
  }

  .container .event-image img {
    max-width: 100%;
    border-radius: 3px;
    left: 1px;
  }

  .event .event-details p {
    margin: 5px;
  }

  .event .event-description p {
    text-align: justify;
  }

  .event .event-details h3 {
    margin: 0 0 .5em 0;
    font-weight: 800;
    font-size: 1.11em;
  }

  @media screen and (max-width: 900px) {
    .container .body .event .event-image {
      display: block;
      max-width: 100%;
      margin: 0 0 20px;
    }
  }

  .copyx {
    display: none !important;
  }

  .addeventatc {
    visibility: hidden;
  }
</style>

<div class="event">
  <div class="event-image">
    <img src="<%= cloudinary(event.cover_image_url, 500) %>" alt="event image">
  </div>
  <div class="event-details">
    <h3><a href="/events/<%= event.slug %>"><%= event.category %>: <%= event.title %></a></h3>
    <p>
      Date: <span class="utc-date" data-datetime="<%= event.starts_at.strftime("%d %B %Y %H:%M UTC") %>">&nbsp;</span>
      <br>
      Time: <span class="utc-time" data-datetime="<%= event.starts_at.strftime("%d %B %Y %H:%M UTC") %>">&nbsp;</span>
      - <span class="utc-time" data-datetime="<%= event.ends_at.strftime("%d %B %Y %H:%M UTC") %>">&nbsp;</span>
      <br>
      Location: <a href="<%= event.location_url %>"><%= event.location_name %></a>
    </p>
    <div title="Add to Calendar" class="addeventatc">
      Add to Calendar
      <span class="start utc"><%= event.starts_at.strftime("%d %B %Y %H:%M UTC") %></span>
      <span class="end utc"><%= event.ends_at.strftime("%d %B %Y %H:%M UTC") %></span>
      <span class="timezone">America/New_York</span>
      <span class="title"><%= event.title %></span>
      <span class="organizer"><%= community_qualified_name %></span>
      <span class="organizer_email"><%= SiteConfig.email_addresses[:members] %></span>
      <span class="calname">dev-event</span>
      <span class="location"><%= event.location_url %></span>
      <span class="alarm_reminder">15</span>
      <span class="description">
        <%= event.description_html.html_safe %>
        ------
        Link to attend - <%= event.location_url %>
      </span>
    </div>
  </div>
  <div class="event-description">
    <%= event.description_html.html_safe %>
  </div>
</div>

<script defer>
  window.addeventasync = function () {
    addeventatc.register('button-dropdown-click', function (obj) {
      ga('send', 'event', 'click', 'Add Event To Calendar', 'User: <%= user_signed_in? %>');
    });
  }
</script>
