% 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 ($etherpad eq 'true'){ %>
          <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 ($etherpad eq 'true') { %>
          <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'