<%
# BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
# Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
# This program is free software; you can redistribute it and/or modify it under the
# terms of the GNU Lesser General Public License as published by the Free Software
# Foundation; either version 3.0 of the License, or (at your option) any later
# version.
#
# BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
# PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
# You should have received a copy of the GNU Lesser General Public License along
# with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
%>

<% unless flash.empty? %>
  <%= render "shared/error_banner" do %>
    <% flash.each do |key, value| %>
      <%= content_tag :div, value, class: "flash #{key} d-inline" %>
    <% end %>
  <% end %>
<% end %>

<div class="container pt-9 pb-4">
  <div class="row pb-8">
    <div class="col-md-8 col-sm-12">
      <p id="main-text" class="font-weight-400 display-4"><%= t("landing.welcome").html_safe %></p>
      <p class="text-muted h4" style="line-height: 22px;"><%= t("landing.about", href: link_to(t("bigbluebutton"), "http://bigbluebutton.org/", target: "_blank", class: "text-blue")).html_safe %></p>
      <br>
      <%= link_to "https://youtu.be/Hso8yLzkqj8", target: "_blank" do %>
        <h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4>
      <% end %>
    </div>
    <div class="col-md-4 col-sm-12 img-cycle text-center">
      <%= image_tag("landing/world.png", class: "active") %>
      <%= image_tag("landing/bbb.png") %>
      <%= image_tag("landing/mobile.png") %>
    </div>
  </div>
  <%= render "shared/features" %>
</div>

<script>
var cycleImages = function(){
  var images = $('.img-cycle img');
  var now = images.filter(':visible');
  var next = now.next().length ? now.next() : images.first();
  var speed = 1500;

  now.fadeOut(speed);
  next.fadeIn(speed);
}

$(function() {
  setInterval(cycleImages, 5000);
});
</script>
