<%= content_for :page_meta do %>
  <% title("#{@event.title} - #{community_name}") %>
  <link rel="canonical" href="<%= app_url("/#{@event.slug}") %>" />
  <meta name="description" content="<%= community_name %> | Events">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="article" />
  <meta property="og:url" content="<%= app_url("/#{@event.slug}") %>" />
  <meta property="og:title" content="<%= @event.title %>" />
  <% if @event.cover_image.present? %>
    <meta property="og:image" content="<%= @event.cover_image_url %>" />
  <% else %>
    <meta property="og:image" content="<%= SiteConfig.main_social_image %>" />
  <% end %>
  <meta property="og:description" content="<%= truncate(strip_tags(@event.description_html), length: 140) %>" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="<%= truncate(strip_tags(@event.title), length: 70) %>">
  <meta property="og:description" content="<%= truncate(strip_tags(@event.description_html), length: 140) %>" />
  <% if @event.cover_image.present? %>
    <meta name="twitter:image:src" content="<%= @event.cover_image_url %>">
  <% else %>
    <meta name="twitter:image:src" content="<%= SiteConfig.main_social_image %>">
  <% end %>
<% end %>

<div class="blank-space"></div>

<style>

  .container .body .event {
    border: none;
    box-shadow: none;
    margin-top: 0px;
  }

  .container .body .event h3 {
    display: none;
  }

  .container .body h1 {
    margin-bottom: 10px;
    text-align: left;
  }

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

  .container .event .event-details {
    font-size: 1.3em;
  }

  .addeventatc {
    border: solid 1px #66e2d5;
  }

  .addeventatc:hover {
    border: 1px solid #557de8;
  }

</style>

<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

<div class="container article">
  <div style="height:30px">
  </div>
  <div class="body">
    <h1 style="padding-left: 20px; font-weight: 500;"><%= @event.category %>: <%= @event.title %></h1>
    <%= render "event", event: @event %>
    <h3 style="text-align: center">
      <span style="background-color: yellow; padding: 5px"><a href="/events"> All EVENTS </a></span></h3>
  </div>
</div>
