% title 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">
              %= $self->req->url->to_abs->host_port . $self->req->url->path
            </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"
       id="conflictModal"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close"
                  data-dismiss="modal">
            &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 (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 url_for('/img/lock.png'), alt => 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 url_for('/img/universal.png'), alt => 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 url_for('/img/multi.png'), alt => 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 url_for('/img/signin.png'), alt => 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 url_for('/img/clock.png'), alt => 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 url_for('/img/screen.png'), alt => 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 url_for('/img/chat.png'), alt => 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 (get_opt_features->{etherpad}) {
          <div class="item carouselIndexItem col-xs-10 col-xs-offset-1">
            %= image url_for('/img/note.png'), alt => 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'