<h3>{{t "Join_chat"}}</h3>
<p class="jsxc-explanation">{{t "muc_explanation"}}</p>
<div class="form-horizontal">
   <div class="form-group">
      <label class="col-sm-4 control-label" for="jsxc-account">{{t "Account"}}</label>
      <div class="col-sm-8">
         <select class="form-control" name="account" id="jsxc-account">
            {{#each accounts}}<option value="{{this.uid}}">{{this.jid}}</option>{{/each}}
         </select>
      </div>
   </div>
   <div class="form-group">
      <label class="col-sm-4 control-label" for="jsxc-server">{{t "Server"}}</label>
      <div class="col-sm-8">
         <input type="text" name="server" id="jsxc-server" class="form-control" required="required" pattern="^[.-0-9a-zA-Z]+" list="jsxc-serverlist" />
         <p class="jsxc-inputinfo jsxc-server jsxc-hidden"></p>
      </div>
   </div>
   <datalist id="jsxc-serverlist">
      <p>
         <label for="jsxc-serverlist-selection"></label>
         <select id="jsxc-serverlist-selection">
            <option></option>
            <option>workaround</option>
         </select>
      </p>
   </datalist>
   <div class="form-group">
      <label class="col-sm-4 control-label" for="jsxc-room">{{t "Room"}}</label>
      <div class="col-sm-8">
         <input type="text" name="room" id="jsxc-room" class="form-control" autocomplete="off" list="jsxc-roomlist" required="required" pattern="^[^\x22&'\/:<>@\s]+" />
         <p class="jsxc-inputinfo jsxc-room jsxc-hidden"></p>
      </div>
   </div>
   <datalist id="jsxc-roomlist">
      <p>
         <label for="jsxc-roomlist-selection"></label>
         <select id="jsxc-roomlist-selection">
            <option></option>
            <option>workaround</option>
         </select>
      </p>
   </datalist>
   <div class="form-group">
      <label class="col-sm-4 control-label" for="jsxc-nickname">{{t "Nickname"}}</label>
      <div class="col-sm-8">
         <input type="text" name="nickname" id="jsxc-nickname" class="form-control" />
      </div>
   </div>
   <div class="form-group jsxc-hidden">
      <label class="col-sm-4 control-label" for="jsxc-password">{{t "Password"}}</label>
      <div class="col-sm-8">
         <input type="text" name="password" id="jsxc-password" class="form-control" />
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-4 col-sm-8">
         <button class="jsxc-button jsxc-button--default jsxc-js-close">{{t "Close"}}</button>
         <button class="jsxc-button jsxc-button--primary jsxc-continue">{{t "Continue"}}</button>
         <button class="jsxc-button jsxc-button--success jsxc-join">{{t "Join"}}</button>
      </div>
   </div>
   <div class="jsxc-status-container"></div>
   <input type="hidden" name="room-jid" />
</div>
