.container
  = render partial: 'schedule_tabs',  locals: { active: 'schedule' }

  #schedule-content
    %h1.text-center
      Schedule for
      = @conference.title
    .dropdown.schedule-dropdown
      %button{ type: "button", class: "btn btn-default dropdown-toggle", 'data-toggle' => "dropdown" }
        = @day
        %span.caret
      %ul.dropdown-menu
        - @dates.each do |date|
          %li.li-dropdown-schedule{ class: "#{ 'active' if @day == date }" }
            = link_to date, "#" + "#{date}", "data-toggle" => "tab", "class" => "date-tab"

    .tab-content
      - @dates.each do |date|
        %div{ class: "tab-pane #{ 'active' if @day == date }", id: "#{ date }" }

          .visible-xs-inline
            = render partial: 'carousel', locals: { date: date, hrs_per_slide: 1 }

          .visible-sm-inline
            = render partial: 'carousel', locals: { date: date, hrs_per_slide: 2 }

          .visible-md-inline.visible-lg-inline
            = render partial: 'carousel', locals: { date: date, hrs_per_slide: 3 }

:javascript
  // change of active tab and the button title when a date is clicked
  $(function() {
    $('.date-tab').on('click', function(e) {
      $('.li-dropdown-schedule').removeClass('active');
      $('.schedule-dropdown').find('button').text($(this).text());
    });
  });

  // hide the right and left controls when neccesary after moving the carousel
  $('.carousel').on('slid.bs.carousel', '',
  function(){
    $(this).children('.left.carousel-control').show();
    $(this).children('.right.carousel-control').show();
    if($(this).find('.first').hasClass('active')) {
      $(this).children('.left.carousel-control').hide();
    }
    if($(this).find('.last').hasClass('active')) {
      $(this).children('.right.carousel-control').hide();
    }
  });

  $(document).ready(function(){
    // hide the left control when the page is ready
    $('.carousel').each(function() {
      if($(this).find('.first').hasClass('active')) {
        $(this).children('.left.carousel-control').hide();
      }
      if($(this).find('.last').hasClass('active')) {
        $(this).children('.right.carousel-control').hide();
      }
    });

    // carousel swipe
    $(".carousel-inner").swiperight(function() {
      $(this).parent().carousel('prev');
    });
    $(".carousel-inner").swipeleft(function() {
      $(this).parent().carousel('next');
    });

    var day = "#{@current_day}";
    // we only go to the date tag in the url if the conference is not taking place now
    if(day === ""){
      // use the date tag in the url to select a tab and the title of the button
      var hash = window.location.hash;
      if(hash && !(hash === '#schedule')){
        hash && $('ul a[href="' + hash + '"]').tab('show');
        $('button.dropdown-toggle').text(hash.substr(1));
      }
    }
  });