? my $app = shift;
? my @connections = $app->ircs;

<div class="config" id="servers">

  <ul id="connections">
    <li class="header">Connections</li>
    <? for my $index (0 .. @connections - 1) { ?>
    <? my $connection = $connections[$index]; ?>
    <? my $alias = $connection->alias; ?>
    <li class="<?= $connection->is_connected ? "connected" : "disconnected" ?> <? if ($index == 0) {?> active<?}?>"
    onclick="Alice.connections.showConnection('<?= $alias ?>')" id="menu_<?= $alias ?>">
    <?= $alias ?>
    </li>
    <? } ?>
  </ul>
  <div class="controls" id="server_controls">
    <a href="#" onclick="return Alice.connections.addServer()">Add</a>
    <a href="#" onclick="return Alice.connections.removeServer()">Remove</a>
  </div>

  <form id="config_data" onsubmit="return Alice.connections.submit(this)">
    <input type="hidden" name="has_servers" value="1" />
    
    <? for my $index (0 .. @connections - 1) { ?>
    <? my $connection = $connections[$index]; ?>
    <? my $alias = $connection->alias; ?>

    <div class="setting<? if ($index == 0) {?> active<?}?>" id="setting_<?= $alias ?>">

      <div class="field" style="width:138px">
        <label>Name</label>
        <span><?= $alias ?></span>
        <input type="hidden" name="<?= $alias ?>_name" value="<?= $alias ?>" />
      </div>

      <div class="field" style="width:150px;margin-right:0">
        <label>Status</label>
        <? my $status = $connection->is_connected ? "connected" : "disconnected" ?>
        <span class="<?= $status ?>" id="<?= $alias ?>_status"><?= $status ?></span>
      </div>

      <div class="field clear" style="width:138px">
        <label>Auto-connect?</label>
        <input type="checkbox"<? if ($connection->config->{autoconnect}) {?> checked="checked"<?}?> name="<?= $alias ?>_autoconnect" />
      </div>

      <div class="field">
        <? my $action = $connection->is_connected ? "disconnect" : "connect" ?>
        <button id="<?= $alias ?>_connection" onclick="return Alice.connections.serverConnection('<?= $connection->alias ?>', '<?= $action ?>')">
          <?= $action ?>
        </button>
      </div>

      <div class="field clear">
        <label>Server address</label>
        <input type="text" name="<?= $alias ?>_host" value="<?= $connection->config->{host} || "" ?>" size="15"/>
      </div>

      <div class="field">
        <label>Port</label>
        <input type="text" name="<?= $alias ?>_port" value="<?= $connection->config->{port} || "" ?>" size="6" style="float:left"/>
        <div style="float:left">
          <input type="checkbox" name="<?= $alias ?>_ssl"<? if ($connection->config->{ssl}) { ?> checked="checked"<? } ?> />
          <span style="font-size:0.7em">SSL</span>
        </div>
      </div>

      <div class="field clear">
        <label>Nick</label>
        <input type="text" name="<?= $alias ?>_nick" value="<?= $connection->config->{nick} || ""?>" size="15" />
      </div>

      <div class="field">
        <label>Name or Avatar URL</label>
        <input type="text" name="<?= $alias ?>_ircname" value="<?= $connection->config->{ircname} || ""?>" size="15" />
      </div>

      <div class="field clear">
        <label>Username</label>
        <input type="text" name="<?= $alias ?>_username" value="<?= $connection->config->{username} || ""?>" size="15" />
      </div>

      <div class="field">
        <label>Password</label>
        <input type="text" name="<?= $alias ?>_password" value="<?= $connection->config->{password} || ""?>" size="15" />
      </div>

      <div class="field clear">
        <label>Channels
          <span style="font-size:0.8em">(e.g. <span style="font-family:monospace;font-size:1em">#alice</span>)</span>
        </label>
        <select name="<?= $alias ?>_channels" multiple="multiple" id="channels_<?= $alias ?>" class="channelselect">
          <? for my $channel (@{$connection->config->{channels}}) { ?>
          <option value="<?= $channel ?>"><?= $channel ?></option>
          <? } ?>
        </select>
        <div class="controls">
          <a href="#" onclick="return Alice.connections.addChannel('<?= $alias ?>')">Add</a>
          <a href="#" onclick="return Alice.connections.removeChannels('<?= $alias ?>')">Remove</a>
        </div>
      </div>

      <div class="field">
        <label>Commands</label>
        <select name="<?= $alias ?>_on_connect" multiple="multiple" id="on_connect_<?= $alias ?>" class="channelselect">
          <? for my $command (@{ $connection->config->{on_connect} }) { ?>
          <option value="<?= $command ?>"><?= $command ?></option>
          <? } ?>
        </select>
        <div class="controls">
          <a href="#" onclick="return Alice.connections.addCommand('<?= $alias ?>')">Add</a>
          <a href="#" onclick="return Alice.connections.removeCommands('<?= $alias ?>')">Remove</a>
        </div>
      </div>

    </div>  
    <? } ?>

    <div class="buttons">
      <button type="submit">Save</button>
      <button onclick="Alice.connections.remove(); return false;">Cancel</button>
    </div>

  </form>
</div>
