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

<div class="container-fluid">
  <div class="well" id="createRoomContainer">
    <h2>
      <center>
        <%=l 'CREATE_ROOM' %>
      </center>
    </h2>
    <form id="createRoom" class="form-inline" action="<%= $self->url_for('/create') %>" method="post">
      <fieldset>
        <div class="control-group">
          <div class="input-group input-group-lg">
            <span class="input-group-addon">
              <strong class="text-muted">
                <%
                  my $url = $self->url_for('/')->to_abs;
                  $url =~ s/^https?:\/\///;
                  $url .= ($url =~ m/\/$/)? '':'/';
                %>
                <%= $url %>
              </strong>
            </span>
            <input id="roomName" name="roomName" type="text" pattern="[\w\-]{0,49}" placeholder="<%=l 'ROOM_NAME' %>" class="form-control help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RANDOM_IF_EMPTY' %>" autofocus>
            <span class="input-group-btn">
              <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></button>
            </span>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <br/><br/>
  <div class="row">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body panelIndex">
          <center>
            <img src="/img/lock.png" alt="Secure">
            <h1><%=l 'SECURE' %></h1>
          </center>
          <p><%=l "P2P_COMMUNICATION" %></p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body panelIndex">
          <center>
            <img src="/img/universal.png" alt="Universal">
            <h1><%=l 'WORKS_EVERYWHERE' %></h1>
          </center>
          <p><%=l "MODERN_BROWSERS" %></p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body panelIndex">
          <center>
            <img src="/img/share.png" alt="Peer to peer">
            <h1><%=l 'MULTI_USER' %></h1>
          </center>
          <p><%=l "THE_LIMIT_IS_YOUR_PIPE" %></p>
        </div>
      </div>
    </div>
  </div>
</div>
%= include 'js_include'
%= include 'footer'