% title $self->l('WELCOME');
%= include 'header'
%= include 'public_toolbar'

<div class="container-fluid">
%= include 'noscript'
  <div class="well publicForm">
    <h1 class="text-center">
      <%= l('CREATE_ROOM') %>
    </h1>
    <form id="createRoom" class="form-horizontal">
      <fieldset>
        <div class="input-group input-group-lg">
          <span class="input-group-addon hidden-xs">
            <strong class="text-muted">
              <%
                my $url = $self->url_for('/')->to_abs;
                $url =~ s/^https?:\/\///;
                $url .= ($url =~ m/\/$/)? '':'/';
              %>
              <%= $url %>
            </strong>
          </span>
          <div class="control-group">
            <input id="roomName" name="roomName" type="text" placeholder="<%= l('ROOM_NAME') %>" class="form-control input-lg help" data-toggle="tooltip" data-placement="bottom" title="<%= l('RANDOM_IF_EMPTY') %>" autofocus>
          </div>
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
          </span>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="modal fade" role="dialog" id="conflictModal" aria-labelledby="conflictModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title"><%= l('THIS_ROOM_ALREADY_EXISTS') %></h4>
        </div>
        <div class="modal-body">
          <div class="panel" id="confirmJoinForm">
            <label><%= l('CONFIRM_OR_CHOOSE_ANOTHER_NAME') %></label>
            <div class="btn-group btn-group-justified">
              <div class="btn-group">
                <button class="btn btn-primary" id="confirmJoinButton"><%= l('JOIN_THIS_ROOM') %></button>
              </div>
              <div class="btn-group">
                <button class="btn btn-default" id="chooseAnotherNameButton"><%= l('CHOOSE_ANOTHER_NAME') %></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br/><br/>
  <div class="row">
    <div id="carouselIndexContainer" class="col-md-8 col-md-offset-2 col-xl-6 col-xl-offset-3 thumbnail">
      <div id="carouselIndex" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators carouselIndexIndicator">
          <li data-target="#carouselIndex" data-slide-to="0" class="active"></li>
          <li data-target="#carouselIndex" data-slide-to="1"></li>
          <li data-target="#carouselIndex" data-slide-to="2"></li>
          <li data-target="#carouselIndex" data-slide-to="3"></li>
          <li data-target="#carouselIndex" data-slide-to="4"></li>
          <li data-target="#carouselIndex" data-slide-to="5"></li>
          <li data-target="#carouselIndex" data-slide-to="6"></li>
          <% if ($self->get_opt_features->{etherpad}){ %>
          <li data-target="#carouselIndex" data-slide-to="7"></li>
          <% } %>
        </ol>
        <div id="carouselIndexContent" class="carousel-inner">
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/lock.png', alt => $self->l('SECURE'), class => "img-responsive carouselLogo"
            <p>
              <%= l('P2P_COMMUNICATION') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('SECURE') %>
              </h2>
            </div>
          </div>
          <div class="item active carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/universal.png', alt => $self->l('WORKS_EVERYWHERE'), class => "img-responsive carouselLogo"
            <p>
              <%= l('MODERN_BROWSERS') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('WORKS_EVERYWHERE') %>
              </h2>
            </div>
          </div>
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/multi.png', alt => $self->l('MULTI_USER'), class => "img-responsive carouselLogo"
            <p>
              <%= l('THE_LIMIT_IS_YOUR_PIPE') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('MULTI_USER') %>
              </h2>
            </div>
          </div>
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/signin.png', alt => $self->l('NO_SIGNIN'), class => "img-responsive carouselLogo"
            <p>
              <%= l('YOU_DONT_HAVE_TO_REGISTER') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('NO_SIGNIN') %>
              </h2>
            </div>
          </div>
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/clock.png', alt => $self->l('QUICK'), class => "img-responsive carouselLogo"
            <p>
              <%= l('STOP_WASTING_TIME') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('QUICK') %>
              </h2>
            </div>
          </div>
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/screen.png', alt => $self->l('SCREEN_SHARING'), class => "img-responsive carouselLogo"
            <p>
              <%= l('SHARE_DESKTOP_OR_WINDOW') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('SCREEN_SHARING') %>
              </h2>
            </div>
          </div>
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/chat.png', alt => $self->l('TEXT_CHAT'), class => "img-responsive carouselLogo"
            <p>
              <%= l('SECURED_TEXT_CHAT') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('TEXT_CHAT') %>
              </h2>
            </div>
          </div>
          <% if ($self->get_opt_features->{etherpad}) { %>
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image '/img/note.png', alt => $self->l('COLLABORATIVE_NOTETAKING'), class => "img-responsive carouselLogo"
            <p>
              <%= l('TAKE_NOTE_IN_REALTIME') %>
            </p>
            <div class="carousel-caption hidden-xs carouselIndexCaption">
              <h2>
                <%= l('COLLABORATIVE_NOTETAKING') %>
              </h2>
            </div>
          </div>
          <% } %>
        </div>
        <a class="left carousel-control" href="#carouselIndex" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carouselIndex" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
    </div>
  </div>
</div>
%= include 'js_common'
    <script>
      $(document).ready(function() {
        initIndex();
      });
    </script>

%= include 'footer'