<% if user_signed_in? %>
  <%= javascript_pack_tag "Chat", defer: true %>
<% end %>
<% title "DEV Live 📡👩‍💻👨‍💻👩‍💻👨‍💻" %>
<link rel="canonical" href="https://dev.to/live" />
<meta name="description" content="DEV LIVE">
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">

<meta property="og:type" content="article" />
<meta property="og:url" content="https://dev.to/live" />
<meta property="og:title" content="DEV LIVE" />
<meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/bqzj1pwho9e0jicqo44s.png" />
<meta property="og:description" content="DEV Live Events" />
<meta property="og:site_name" content="The Practical Dev" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ThePracticalDev">
<meta name="twitter:title" content="DEV LIVE">
<meta property="og:description" content="DEV Live Events" />
<meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/bqzj1pwho9e0jicqo44s.png">

<style>
  <% cache "live-page-css-#{ApplicationConfig['DEPLOYMENT_SIGNATURE']}", expires_in: 1.hour do %>
  <%= Rails.application.assets["live.css"].to_s.html_safe %>
  <% end %>
</style>

<% if current_user&.has_role?(:super_admin) %>
  <div class="live-container">
    <div class="live-component">
      <div>
        <iframe class="live-video" src="//iframe.dacast.com/b/105417/c/465464" width="1920" height="1080" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
      </div>
      <div class="live-chat-wrapper">
        <div id="chat" class="live-chat" data-pusher-key="<%= ENV["PUSHER_KEY"] %>" data-chat-channels="<%= @chat_channels %>" data-chat-options="<%= { showChannelsList: false, showTimestamp: false, activeChannelId: @active_channel.id }.to_json %>">
        </div>
      </div>
    </div>
    <div class="live-under-message">DEV Live is in beta and currently does not support Safari. We recommend Chrome or Firefox for optimal viewing experience. If you are having issues, contact
      <a href="mailto:members@dev.to">members@dev.to</a> for support. ❤️
    </div>
  </div>
<% elsif false %>
  <div class="live-upcoming-info">
    <h1 style="text-align: center">
      <span style="display: inline-block">DEV LIVE <%= image_tag("emoji/emoji-one-television.png", style: "width: 55px; height: 50px; vertical-align: text-top;", alt: "television emoji") %></span>
    </h1>
    <h4 style="text-align: center">
      <i>Our event is starting soon! Check back very shortly.</i>
    </h4>
  </div>
  <script>
    setTimeout(function () {
      window.location.reload(1);
    }, 2500);
  </script>
<% elsif false %>
  <div class="live-upcoming-info">
    <h1 style="text-align: center;font-size:3.5em;margin:-100px auto">DEV IS
      <span style="display: inline-block">LIVE <%= image_tag("emoji/emoji-one-television.png", style: "width: 60px;", alt: "television emoji") %></span>
    </h1>
    <%= render "devise/registrations/registration_form" %>

  </div>
<% else %>
  <div class="live-upcoming-info">
    <h1>We are working on more ways to bring live coding to the community.</h1>
    <h2>Check out <a href="/settings/integrations">the integrations tab in your settings</a>.</h2>
  </div>
<% end %>
