<!doctype>
<html>

<!-- {{{ head -->
<head>
  <link rel="icon" href="favicon.ico" />

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title ng-controller="NavCtrl">{{ name }}</title>

  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-responsive.css">
  <link rel="stylesheet" href="css/font-awesome.css">

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/download.css">
  <link rel="stylesheet" href="css/modals.css">

  <style>
    /* temporary hack for angularui modal implementation */
    .control-group input {
      height: 30px;
    }
  </style>


  <!-- external javascript dependencies -->
  <script src="js/libs/jquery-2.1.0.js"></script>
  <script src="js/libs/lodash.js"></script>

  <script src="js/libs/angular.js"></script>

  <script src="js/libs/angularui-bootstrap.js"></script>


  <script src="js/libs/jquery.flot.js"></script>
  <script src="js/libs/jquery.flot.time.js"></script>

  <!-- We do manual resize currently
  <script src="js/libs/jquery.flot.resize.js"></script>
  -->

  <!-- webui core -->
  <script src="js/init.js"></script>

  <script src="js/directives/chunkbar.js"></script>
  <script src="js/directives/dgraph.js"></script>
  <script src="js/directives/fselect.js"></script>

  <script src="js/filters/bytes.js"></script>

  <script src="js/services/constants.js"></script>
  <script src="js/services/deps.js"></script>
  <script src="js/services/base64.js"></script>
  <script src="js/services/utils.js"></script>

  <script src="js/services/modals.js"></script>
  <script src="js/services/alerts.js"></script>

  <script src="js/services/settings/settings.js"></script>
  <script src="js/services/settings/filters.js"></script>

  <script src="js/services/rpc/jsoncall.js"></script>
  <script src="js/services/rpc/sockcall.js"></script>
  <script src="js/services/rpc/syscall.js"></script>
  <script src="js/services/rpc/rpc.js"></script>
  <script src="js/services/rpc/helpers.js"></script>


  <script src="js/ctrls/main.js"></script>
  <script src="js/ctrls/modal.js"></script>
  <script src="js/ctrls/nav.js"></script>
  <script src="js/ctrls/alert.js"></script>
  <script src="js/ctrls/props.js"></script>
</head>
<!-- }}} -->

<body ng-controller="MainCtrl">

<!-- {{{ header -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
  <div class="container">
    <!--  using a span for collapse rather than a to fix the angular majic on anchors -->
    <span class="btn btn-navbar"
      ng-click="collapsed = !collapsed">

      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </span>

    <a class="brand"><span class="icon-circle-arrow-down"></span> {{ name }}</a>

    <form class="navbar-form pull-right control-group">
      <input class="span3 input-large" type="text" placeholder="Search" ng-model="downloadFilter" autocomplete="off" ng-change="onDownloadFilter()"></input>
    </form>
    <div class="nav-collapse" collapse="collapsed" ng-controller="NavCtrl">

    <!-- {{{ Nav menu -->
    <ul class="nav">
      <li class="dropdown">
        <a class="dropdown-toggle" href="#">
          Add <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#" ng-click="addUris()">
              <i class="icon-download">&nbsp;</i> By URIs
            </a>
          </li>
          <li ng-show="isFeatureEnabled('BitTorrent')">
            <a href="#" ng-click="addTorrents()">
              <i class="icon-file">&nbsp;</i> By Torrents
            </a>
          </li>
          <li ng-show="isFeatureEnabled('Metalink')">
            <a href="#" ng-click="addMetalinks()">
              <i class="icon-file">&nbsp;</i> By Metalinks
            </a>
          </li>
        </ul>
      </li>

      <li class="dropdown">
      <a class="dropdown-toggle" href="#"> Manage <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li>
          <a
            href="#"
            ng-click="forcePauseAll()"><i class="icon-pause">&nbsp;</i> Pause All</a>
        </li>
        <li>
          <a
            href="#"
            ng-click="unpauseAll()"><i class="icon-play">&nbsp;</i> Resume Paused</a>
        </li>
        <li>
          <a
            href="#"
            ng-click="purgeDownloadResult()"><i class="icon-remove">&nbsp;</i> Purge Completed</a>
        </li>

        <!-- not adding remove all as requires many rpc syscalls to finish
        <li>
          <a
            href="#"
            ng-click="removeAll()"><i class="icon-fire">&nbsp;</i> Remove All</a>
        </li>
        -->
      </ul>
      </li>

    </ul>

    <ul class="nav">
      <li class="dropdown">
        <a
          href="#"
          class="dropdown-toggle">Settings <b class="caret"></b></a>

        <ul class="dropdown-menu">
          <li>
            <a
              ng-click="changeCSettings()"
              href="#"><i class="icon-wrench">&nbsp;</i> Connection Settings</a>
          </li>

          <li>
            <a
              ng-click="changeGSettings()"
              href="#"><i class="icon-wrench">&nbsp;</i> Global Settings</a>
          </li>

          <li>
            <a
              ng-click="showServerInfo()"
              href="#"><i class="icon-info-sign">&nbsp;</i> Server info</a>
          </li>

          <li>
            <a
              ng-click="showAbout()"
              href="#"><i class="icon-question-sign">&nbsp;</i> About and contribute</a>
          </li>
        </ul>
      </li>
    </ul>

    <ul class="nav pull-right" ng-show="false">
      <li class="dropdown">
        <a
          class="dropdown-toggle"
          href="#">Miscellaneous <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li>
            <a href="#"><i class="icon-list-alt">&nbsp;</i> Global Statistics</a>
          </li>
          <li>
            <a href="#"><i class="icon-info-sign">&nbsp;</i> About</a>
          </li>
        </ul>
      </li>
    </ul>
    <!-- }}} -->

    </div><!--/.nav-collapse -->
  </div>
  </div>
</div>
<!-- }}} -->

<!-- {{{ body -->
<div role="main" class="container-fluid">

  <!-- {{{ alerts -->
  <div ng-controller="AlertCtrl" class="row alerts">
    <div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts">
      <span ng-bind-html="alert.msg"></span>
      <button type="button" class="close" ng-click="removeAlert($index)">x</button>
    </div>
  </div>
  <!-- }}} -->

<div class="row-fluid">
  <div class="span3">
    <!-- {{{ nav side bar -->
    <div class="well sidebar-nav">

      <!-- {{{ download filters -->
      <ul id="filters" class="clearfix nav nav-list">
        <li class="nav-header">Download Filters</li>
        <li>
          <label for="filter-speed">
            <input type="checkbox" ng-model="filterSpeed" ng-change="persistFilters()" id="filter-speed">
            Running
          </label>
        </li>
        <li class="active">
          <label for="filter-active">
            <input type="checkbox" ng-model="filterActive" ng-change="persistFilters()" id="filter-active">
            Active
          </label>
        </li>
        <li>
          <label for="filter-waiting">
            <input type="checkbox" ng-model="filterWaiting" ng-change="persistFilters()" id="filter-waiting">
            Waiting
          </label>
        </li>
        <li>
          <label for="filter-complete">
            <input type="checkbox" ng-model="filterComplete" ng-change="persistFilters()" id="filter-complete">
            Complete
          </label>
        </li>
        <li>
          <label for="filter-error">
            <input type="checkbox" ng-model="filterError" ng-change="persistFilters()" id="filter-error">
            Error
          </label>
        </li>
        <li>
          <label for="filter-paused">
            <input type="checkbox" ng-model="filterPaused" ng-change="persistFilters()" id="filter-paused">
            Paused
          </label>
        </li>
        <li>
          <label for="filter-removed">
            <input type="checkbox" ng-model="filterRemoved" ng-change="persistFilters()" id="filter-removed">
            Removed
          </label>
        </li>
        <li>
          <label><input type="checkbox" ng-model="hideLinkedMetadata" id="hide-linked-metadata"> Hide linked meta-data</label>
          <p>
          Displaying <strong>{{totalDownloads}}</strong> of <em>{{totalAria2Downloads()}}</em> downloads
          </p>
          <p>
            <button ng-click="toggleStateFilters()" class="btn btn-default btn-mini">Toggle</button>
            <button ng-click="resetFilters()" class="btn btn-default btn-mini">Reset filters</button>
          </p>
        </li>
      </ul>
      <!-- }}} -->

      <br>

      <!-- {{{ starred properties -->
      <ul class="clearfix nav nav-list" ng-controller="StarredPropsCtrl" ng-show="properties.length">
        <li class="nav-header">Quick Access Settings</li>
        <li ng-repeat="prop in properties">
          <label title="{{prop.desc}}">
            <div>{{prop.name}}</div>
            <div class="control-group">
              <select style="width: 100%;" ng-show="prop.options.length" ng-options="opt for opt in prop.options" ng-model="prop.val"></select>
              <input style="width: 100%;" ng-show="!prop.options.length" type="text" class="input-large" ng-model="prop.val"/>
            </div>
          </label>
        </li>
        <li>
          <button ng-disabled="!enabled()" ng-click="save()" class="btn btn-small">Save settings</button>
        </li>
      </ul>
      <!-- }}} -->

      <br>

      <!-- {{{ global statistics -->
      <ul class="nav nav-list">
        <li class="nav-header">Global Statistics</li>
        <li>
          <div
            dspeed="gstats.downloadSpeed"
            uspeed="gstats.uploadSpeed"
            dgraph ng-show="totalAria2Downloads()"
            nolabel="true"
            draw="true">
          </div>
        </li>
      </ul>
      <!-- }}} -->


    </div>
    <!-- }}} -->
  </div>

  <div class="span9">
    <!-- {{{ downloads -->
    <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
    <div ng-show="!totalAria2Downloads()" class="hero-unit">
      Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files!
    </div>


    <!-- {{{ download template -->

    <table
      ng-repeat="download in getDownloads()"
      class="row download" data-gid="{{download.gid}}">
      <tbody>
      <tr>
        <td class="download-name download-item" ng-click="download.collapsed = !download.collapsed">
          <i class="icon-magnet" style="color: red;" ng-show="download.metadata"></i> {{download.name}}
        </td>
        <td class="download-controls download-item" rowspan="2">
          <!-- {{{ download control buttons -->
          <div class="btn-group">
            <button
              ng-show="hasStatus(download, ['active', 'waiting'])"
              class="btn"
              ng-click="pause(download)">
              <i class="icon-pause"></i>
            </button>

            <button
              ng-show="hasStatus(download, 'paused')"
              class="btn"
              ng-click="resume(download)">
              <i class="icon-play"></i>
            </button>

            <button
              ng-show="canRestart(download)"
              class="btn"
              ng-click="restart(download)">
              <i class="icon-repeat"></i>
            </button>

            <button
              class="btn hidden-phone"
              ng-click="remove(download)">
              <i class="icon-stop"></i>
            </button>

            <button
              class="btn hidden-phone"
              ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
              ng-click="showSettings(download)">
              <i class="icon-cog"></i>
            </button>

            <button class="btn dropdown-toggle">
              <i class="caret"></i>
            </button>
            <ul class="dropdown-menu">

              <li class="visible-phone">
                <a
                  ng-click="showSettings(download)"
                  ng-show="['waiting', 'active'].indexOf( getType(download) )!= -1"
                  href="#"><i class="icon-cog">&nbsp;</i> Settings</a>
              </li>

              <li ng-show="download.bittorrent && false">
                <a href="#"><i class="icon-list-alt">&nbsp;</i> Peers</a>
              </li>

              <li>
                <a ng-click="download.collapsed = !download.collapsed"
                   href="#"><i class="icon-info-sign">&nbsp;</i> More Info</a>
              </li>

              <li class="visible-phone">
                <a ng-click="remove(download)"
                   href="#"><i class="icon-remove">&nbsp;</i> Remove</a>
              </li>
            </ul>
          </div>
          <!-- }}} -->
        </td>
      </tr>
      <tr>
        <td class="download-overview download-item" ng-click="download.collapsed = !download.collapsed" ng-switch="download.status">
          <!-- {{{ statistics -->
          <ul class="stats pull-left" ng-switch-when="active">
            <!-- {{{ active download statistics -->
            <li class="label label-active hidden-phone hidden-tablet">
              <span title="Download status"><i class="icon-play">&nbsp;</i> {{download.status}}</span>
            </li>

            <li class="label" ng-class="{'label-active': download.downloadSpeed > 2048, 'label-warning': download.downloadSpeed <= 2048}">
              <span title="Download Speed"><i class="icon-download">&nbsp;</i> {{download.downloadSpeed | bspeed}}</span>
            </li>

            <li ng-show="download.bittorrent" class="label hidden-phone" ng-class="{'label-info': download.uploadSpeed > 2048}">
              <span title="Upload Speed"><i class="icon-upload">&nbsp;</i> {{download.uploadSpeed | bspeed}}</span>
            </li>

            <li class="label label-active">
              <span title="Estimated time"><i class="icon-time">&nbsp;</i> {{getEta(download) | time}}</span>
            </li>

            <li class="label label-active hidden-phone">
              <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
            </li>

            <li class="label label-active hidden-phone">
              <span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.fmtCompletedLength}}</span>
            </li>

            <li class="label label-active hidden-phone hidden-tablet">
              <span title="Progress"><i class="icon-chevron-right">&nbsp;</i> {{getProgress(download)}}%</span>
            </li>

            <!-- }}} -->
          </ul>

          <ul class="stats pull-left" ng-switch-when="paused">
            <!-- {{{ paused download statistics -->
            <li class="label label-info">
              <span title="Download Status"><i class="icon-pause">&nbsp;</i> {{download.status}}</span>
            </li>

            <li class="label label-info">
              <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
            </li>

            <li class="label label-info hidden-phone">
              <span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.fmtCompletedLength}}</span>
            </li>

            <li class="label label-info hidden-phone">
              <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
            </li>

            <!--  }}} -->
          </ul>

          <ul class="stats pull-left" ng-switch-when="waiting">
            <!-- {{{ paused download statistics -->
            <li class="label">
              <span title="Download Status"><i class="icon-caret-right">&nbsp;</i> {{download.status}}</span>
            </li>

            <li class="label">
              <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
            </li>

            <li class="label hidden-phone">
              <span title="Downloaded"><i class="icon-download-alt">&nbsp;</i> {{download.fmtCompletedLength}}</span>
            </li>

            <li class="label hidden-phone">
              <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
            </li>

            <!--  }}} -->
          </ul>

          <ul class="stats pull-left" ng-switch-when="complete">
            <!-- {{{ complete download statistics -->

            <li class="label label-success">
              <span title="Download Status"><i class="icon-check">&nbsp;</i> {{download.status}}</span>
            </li>

            <li class="label label-success">
              <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
            </li>

            <li class="label label-success hidden-phone">
              <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
            </li>

            <!-- }}} -->
          </ul>

          <ul class="stats pull-left" ng-switch-when="removed">
            <!-- {{{ removed download statistics -->
            <li class="label label-warning">
              <span title="Download Status"><i class="icon-remove">&nbsp;</i> {{download.status}}</span>
            </li>

            <li class="label label-warning">
              <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
            </li>

            <li class="label label-warning hidden-phone">
              <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
            </li>

            <!-- }}} -->
          </ul>

          <ul class="stats pull-left" ng-switch-when="error">
            <!-- {{{ error download statistics -->
            <li class="label label-important">
              <span title="Download Status"><i class="icon-remove-sign">&nbsp;</i> {{download.status}}</span>
            </li>

            <li class="label label-important">
              <span title="Download Size"><i class="icon-cloud-download">&nbsp;</i> {{download.fmtTotalLength}}</span>
            </li>

            <li class="label label-important hidden-phone">
              <span title="Download Path"><i class="icon-folder-open">&nbsp;</i> {{download.dir}}</span>
            </li>

            <!-- }}} -->
          </ul>

          <!-- }}} -->
        </td>
      </tr>
      <tr>
        <td class="download-progress download-item" colspan="2" ng-click="download.collapsed = !download.collapsed">
          <div class="progress progress-striped" ng-class="getProgressClass(download)">
            <div class="bar" style="width: {{getProgress(download)}}%;"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" ng-click="download.collapsed = !download.collapsed" ng-switch="download.collapsed">
          <div collapse="download.collapsed">
            <div class="download-item" ng-show="download.numPieces > 1">
              <canvas bitfield="download.bitfield" draw="!download.collapsed" pieces="download.numPieces" class="progress chunk-canvas" width="1400" chunkbar></canvas>
            </div>
            <ul class="stats download-item">
              <li class="label" title="Estimated Time"><i class="icon-time">&nbsp;</i> <span class="download-eta">{{getEta(download) | time}}</span></li>
              <li class="label" title="Download Size"><i class="icon-cloud-download">&nbsp;</i> <span class="download-totalLength">{{download.fmtTotalLength}}</span></li>
              <li class="label" title="Downloaded"><i class="icon-download-alt">&nbsp;</i> <span class="download-completedLength">{{download.fmtCompletedLength}}</span></li>
              <li class="label" title="Download Speed"><i class="icon-download">&nbsp;</i> <span class="download-downloadSpeed">{{download.fmtDownloadSpeed}}</span></li>

              <li class="label" title="Upload Speed" ng-show="download.bittorrent"><i class="icon-upload">&nbsp;</i> <span class="download-uploadSpeed">{{download.fmtUploadSpeed}}</span></li>
              <li class="label" title="Uploaded" ng-show="download.bittorrent"><i class="icon-upload-alt">&nbsp;</i> <span class="download-uploadLength">{{download.fmtUploadLength}}</span></li>

              <li class="label" title="Connections"><i class="icon-link">&nbsp;</i> <span class="download-connections">{{download.connections}}</span></li>

              <li class="label" title="Download GID"><i class="icon-reorder">&nbsp;</i> <span class="download-gid">{{download.gid}}</span></li>
              <li class="label" title="Number of Pieces"># of <i class="icon-puzzle-piece">&nbsp;</i> <span class="download-numPieces">{{download.numPieces}}</span></li>
              <li class="label" title="Piece Length"><i class="icon-puzzle-piece"></i> Length&nbsp; <span class="download-pieceLength">{{download.fmtPieceLength}}</span></li>
              <li class="label" title="Download Path"><i class="icon-folder-open">&nbsp;</i> <span class="download-dir">{{download.dir}}</span></li>
            </ul>
            <ul class="download-files hidden-phone download-item">
              <li class="label" ng-repeat="file in download.files">{{file.relpath}} ({{file.fmtLength}})</li>
            </ul>
            <div ng-show="hasStatus(download, 'active')" class="download-item hidden-phone">
              <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
    </table>
    <!-- }}} -->

    <!-- }}} -->
  </div>

  <!-- {{{ download pagination -->
  <div class="pagination pagination-right" ng-show="totalDownloads > pageSize">
    <pagination
      total-items="totalDownloads"
      items-per-page="pageSize"
      max-size="6"
      page="currentPage"
      boundary-links="true"
      previous-text="&lsaquo;"
      next-text="&rsaquo;"
      first-text="&laquo;"
      last-text="&raquo;"
      >
    </pagination>
  </div>
  <!-- }}} -->

</div>
</div>

<!-- }}} -->

<!-- {{{ modals -->
<div ng-controller="ModalCtrl">

<!--{{{ add uri modal -->
<script type="text/ng-template" id="getUris.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>Add Downloads By URIs</h3>
  </div>
  <form class="modal-body">
    <fieldset>
      <legend>Download URIs</legend>
      <p class="help-block">
        - You can add multiple downloads (files)
        at the same time by putting uris for each
        file on a separate line. <br>
        - You can also add multiple uris (mirrors) for the
        *same* file. To do this separate the uris
        by a space. <br>
        - A URI can be HTTP(S)/FTP/BitTorrent Magnet URI.
        - Aria2 will use multiple uris (or mirrors) to boost
        the download speed for that file (download). <br>
        E.g. To add 2 files (downloads) f1.jpg
        and f2.mp4 with 2 uris (mirrors) each,
        add uris as following:
        <br>
        <!-- pre tags print tabs, so do not indent them! -->
<pre>
http://ex1.com/f1.jpg http://ex2.com/f1.jpg
http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
</pre>
      </p>
      <textarea rows="6" style="width: 100%" ng-model="getUris.uris"></textarea>

      <div class="control-group">
        <div ng-repeat="(name, set) in getUris.settings">
          <label class="control-label">{{name}}</label>

          <div class="controls">
            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
            </select>
            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
          </div>
          <br><br>
        </div>
      </div>
    </fieldset>

    <button class="btn" ng-click="getUris.advance_opts()">Add Download Specific Options</button>

  </form>
  <div class="modal-footer">
    <button class="btn" ng-click="$dismiss()">Cancel</button>
    <button class="btn btn-primary" ng-click="$close()">Start</button>
  </div>
</script>
<!-- }}} -->

<!-- {{{ add torrent modal -->
<script type="text/ng-template" id="getTorrents.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>Add Downloads By Torrents</h3>
  </div>
  <form class="modal-body">
    <fieldset>
      <legend>Select Torrents</legend>
      <p class="help-block">
        - Select the torrent from the local filesystem to start the download. <br>
        - You can select multiple torrents to start multiple downloads <br>
        - To add a magnet torrent url, use the add url option and add it there.
      </p>
      <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
      <div class="control-group">
        <div ng-repeat="(name, set) in getTorrents.settings">
          <label class="control-label">{{name}}</label>

          <div class="controls">
            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
            </select>
            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
          </div>
          <br><br>
        </div>
      </div>
    </fieldset>

    <button class="btn" ng-click="getTorrents.advance_opts()">Add Download Specific Options</button>
  </form>
  <div class="modal-footer">
    <button class="btn" ng-click="$dismiss()">Cancel</button>
    <button class="btn btn-primary" ng-click="$close()">Start</button>
  </div>
</script>
<!-- }}} -->

<!-- {{{ add metalink modal -->
<script type="text/ng-template" id="getMetalinks.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>Add Downloads By Metalinks</h3>
  </div>
  <form class="modal-body">
    <fieldset>
      <legend>Select Metalinks</legend>
      <p class="help-block">
        - Select the metalink from the local filesystem to start the download. <br>
        - You can select multiple metalinks to start multiple downloads
      </p>
      <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
      <div class="control-group">
        <div ng-repeat="(name, set) in getMetalinks.settings">
          <label class="control-label">{{name}}</label>

          <div class="controls">
            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
            </select>
            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
          </div>
          <br><br>
        </div>
      </div>
    </fieldset>

    <button class="btn" ng-click="getMetalinks.advance_opts()">Add Download Specific Options</button>
  </form>
  <div class="modal-footer">
    <button class="btn" ng-click="$dismiss()">Cancel</button>
    <button class="btn btn-primary" ng-click="$close()">Start</button>
  </div>
</script>
<!-- }}} -->

<!-- {{{ settings modal -->
<script type="text/ng-template" id="settings.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>{{settings.title}}</h3>
  </div>

  <form class="form-horizontal modal-body">
    <fieldset>
      <div class="control-group">
        <div ng-repeat="(name, set) in settings.settings">
          <label class="control-label">{{name}}</label>

          <div class="controls">
            <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
            </select>
            <input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/>
            <label class="checkbox" ng-show="set.starred != undefined">
              <input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page)
            </label>
            <p class="help-block">{{set.desc}}</p>
          </div>
          <br><br>
        </div>
      </div>
    </fieldset>
  </form>

  <div class="modal-footer">
    <button class="btn" ng-click="$dismiss()">Cancel</button>
    <button class="btn btn-primary" ng-click="$close()">{{settings.actionText}}</button>
  </div>
</script>
<!-- }}} -->

<!--{{{ connection modal -->
<script type="text/ng-template" id="connection.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>Connection Settings</h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal">
      <fieldset>
        <legend>Aria2 RPC host and port</legend>
        <div class="control-group">
          <label class="control-label">Enter the host:</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on">http(s)://</span>
              <input type="text" class="input-xlarge"
                ng-model="connection.conf.host"/>
            </div>
            <p class="help-block">
              Enter the ip or dns name of the server on which the
              rpc for aria2 is running (default = localhost)
            </p>
          </div>

          <label class="control-label">Enter the port:</label>
          <div class="controls">
            <input type="text" class="input-xlarge"
              ng-model="connection.conf.port"/>
            <p class="help-block">
              Enter the port of the server on which the rpc for
              aria2 is running (default = 6800)
            </p>
          </div>

          <label class="control-label">SSL/TLS encryption:</label>
          <div class="controls">
            <label>
              <input type="checkbox" ng-model="connection.conf.encrypt"/>
              Enable SSL/TLS encryption.
            </label>
          </div>

          <label class="control-label">Enter the secret token (optional):</label>
          <div class="controls">
            <label>
              <input type="text" class="input-xlarge" ng-model="connection.conf.auth.token"/>
              <p class="help-block">
              Enter the aria2 RPC secret token (leave empty if authentication is not enabled)>
              </p>
            </label>
          </div>

          <label class="control-label">Enter the username (optional):</label>
          <div class="controls">
            <input type="text" class="input-xlarge"
              ng-model="connection.conf.auth.user"/>
            <p class="help-block">
              Enter the aria2 RPC username
              (empty if authentication not enabled)
            </p>
          </div>

          <label class="control-label">Enter the password (optional):</label>
          <div class="controls">
            <input type="password" class="input-xlarge"
              ng-model="connection.conf.auth.pass"/>
            <p class="help-block">
              Enter the aria2 RPC password
              (empty if authentication not enabled)
            </p>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="modal-footer">
    <button href="#" class="btn" ng-click="$dismiss()">Cancel</button>
    <button href="#" class="btn btn-primary" ng-click="$close()">
      Save Connection configuration
    </button>
  </div>
</script>
<!-- }}} -->


<!-- {{{ server info modal -->
<script type="text/ng-template" id="server_info.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>Aria2 server info</h3>
  </div>
  <div class="modal-body">
      <b>Aria2 Version {{miscellaneous.version}}</b>
      <br><br>
      <b>Features Enabled</b>
        <ul>
        <li
          ng-repeat="feature in miscellaneous.enabledFeatures">
          <span>{{feature}}</span>
        </li>
        </ul>
  </div>
  <div class="modal-footer">
    <button class="btn" ng-click="$dismiss()">Close</button>
  </div>
</script>
<!-- }}} -->

<!-- {{{ about modal -->
<script type="text/ng-template" id="about.html">
  <div class="modal-header">
    <button class="close" ng-click="$dismiss()">x</button>
    <h3>About and contribute</h3>
  </div>
  <div class="modal-body">
      <p>
        To download the latest version of the project,<br />
         add issues or to contribute back head on to:<br />
        <a href="https://github.com/ziahamza/webui-aria2">http://github.com/ziahamza/webui-aria2</a>
        <br /><br />
        Or you can open the latest version in browser through:<br />
        <a href="http://ziahamza.github.io/webui-aria2">http://ziahamza.github.io/webui-aria2</a>
      </p>
  </div>
  <div class="modal-footer">
    <button class="btn" ng-click="$dismiss()">Close</button>
  </div>
</script>
<!-- }}} -->


</div>
<!-- }}} -->

<!-- Bottom Padding -->
<br /><br /><br /><br /><br />

</body>
</html>