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

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

  <div class="sidebar">

    <h2>Connections</h2>
    
    <ul id="connections">
      <? for my $index (0 .. @ircs - 1) { ?>
        <? my $irc = $ircs[$index]; ?>
        <? my $network = $irc->name; ?>
        <li class="<?= $irc->is_connected ? "connected" : "disconnected" ?> <? if ($index == 0) {?> active<?}?>"
            onclick="Alice.connections.showConnection('<?= $network ?>')" id="menu_<?= $network ?>">
          <?= $network ?>
        </li>
      <? } ?>
    </ul>

    <div class="controls" id="server_controls">
      <a href="#" onclick="return Alice.connections.addServer()">New</a>
      <a href="#" onclick="return Alice.connections.removeServer()">Remove</a>
    </div>

  </div>

  <form id="config_data" onsubmit="return Alice.connections.submit(this)">

  <div class="config_body">

      <input type="hidden" name="has_servers" value="1" />
    
? for my $index (0 .. @ircs - 1) {
?   my $irc = $ircs[$index];
?   my $network = $irc->name;
?   my $config = $app->config->servers->{$network};

?   my ($action, $status);
?   if ($irc->is_connected) {
?     $status = "connected";
?     $action = "disconnect";
?   } elsif ($irc->is_connecting) {
?     $status = "connecting";
?     $action = "disconnect";
?   } elsif ($irc->reconnect_timer) {
?     $status = "reconnecting";
?     $action = "disconnect";
?   } else {
?     $status = "disconnected";
?     $action = "connect";
?   }

    <table class="<? if ($index == 0) {?>active<?}?>" id="setting_<?= $network ?>">

      <tr>
        <td>
          <label>Name</label>
          <span><?= $network ?></span>
          <input type="hidden" name="<?= $network ?>_name" value="<?= $network ?>" />
        </td>

        <td>
          <label>Status</label>
          <span class="<?= $status ?>" id="<?= $network ?>_status"><?= $status ?></span>
        </td>
      </tr>

      <tr>
        <td>
          <label>Auto-connect?</label>
          <input type="checkbox"<? if ($config->{autoconnect}) {?> checked="checked"<?}?> name="<?= $network ?>_autoconnect" />
        </td>

        <td>
          <button id="<?= $network ?>_connection" onclick="return Alice.connections.serverConnection('<?= $irc->name ?>', '<?= $action ?>')">
            <?= $action ?>
          </button>
        </td>
      </tr>

      <tr>
        <td>
          <label>Server address</label>
          <input type="text" name="<?= $network ?>_host" value="<?= $config->{host} || "" ?>" size="15"/>
        </td>

        <td>
          <label>Port</label>
          <input type="text" name="<?= $network ?>_port" value="<?= $config->{port} || "" ?>" size="6" style="float:left"/>

            <input type="checkbox" name="<?= $network ?>_ssl"<? if ($config->{ssl}) { ?> checked="checked"<? } ?> />
            <span style="font-size:0.7em">SSL</span>
        </td>
      </tr>

      <tr>
        <td>
          <label>Nick</label>
          <input type="text" name="<?= $network ?>_nick" value="<?= $config->{nick} || ""?>" size="15" />
        </td>

        <td>
          <label>Name or Avatar URL</label>
          <input type="text" name="<?= $network ?>_ircname" value="<?= $config->{ircname} || ""?>" size="15" />
        </td>
      </tr>

      <tr>
        <td>
          <label>Username</label>
          <input type="text" name="<?= $network ?>_username" value="<?= $config->{username} || ""?>" size="15" />
        </td>

        <td>
          <label>Password</label>
          <input type="text" name="<?= $network ?>_password" value="<?= $config->{password} || ""?>" size="15" />
        </td>
      </tr>

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

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

? }

  </div>

  <div class="buttons">
    <a style="text-decoration:none;color:#fff;font-size:11px" href="/export" target="_blank">export config</a>
    <button type="submit">Save</button>
    <button onclick="Alice.connections.remove(); return false;">Cancel</button>
  </div>

  </form>

</div>