<html id="stylus">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title i18n-text="manageTitle"></title>
  <link rel="stylesheet" href="manage.css">
  <link rel="stylesheet" href="msgbox/msgbox.css">

  <style id="style-overrides"></style>

  <!-- Notes:
    * Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
    * inter-tag whitespace in templates is automatically removed in localization.js
    * i18n-anything attribute automatically creates "anything" attribute
  -->

  <template data-id="style">
    <div class="entry">
      <h2 class="style-name">
        <a class="style-name-link" href="edit.html?id="></a>
        <a target="_blank" class="homepage">
          <svg class="svg-icon" viewBox="0 0 20 20">
            <polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
            <polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/>
          </svg>
        </a>
      </h2>
      <p class="applies-to">
        <label i18n-text="appliesDisplay"></label>
        <span class="targets"></span>
      </p>
      <p class="actions">
        <a class="style-edit-link" href="edit.html?id=">
          <button i18n-text="editStyleLabel"></button>
        </a>
        <button class="enable" i18n-text="enableStyleLabel"></button>
        <button class="disable" i18n-text="disableStyleLabel"></button>
        <button class="delete" i18n-text="deleteStyleLabel"></button>
        <button class="check-update" i18n-text="checkForUpdate"></button>
        <button class="update" i18n-text="installUpdate"></button>
        <span class="update-note"></span>
      </p>
    </div>
  </template>

  <template data-id="styleCompact">
    <div class="entry">
      <h2 class="style-name">
        <input class="checker" type="checkbox" i18n-title="toggleStyle">
        <a class="style-name-link" href="edit.html?id="></a>
      </h2>
      <p class="actions">
        <a target="_blank" class="homepage">
          <svg class="svg-icon" viewBox="0 0 20 20">
            <polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
            <polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/>
          </svg>
        </a>
        <span i18n-title="deleteStyleLabel">
          <svg class="svg-icon delete" viewBox="0 0 14 16">
            <path shape-rendering="crispEdges" fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
          </svg>
        </span>
        <span class="updater-icons">
          <span class="check-update" i18n-title="checkForUpdate">
            <svg class="svg-icon" viewBox="0 0 20 20">
              <path d="M15,11c-0.5,2.3-2.5,4.1-5,4.1c-2.4,0-4.5-1.7-5-4.1H3.3c0.5,3.3,3.3,5.8,6.7,5.8s6.2-2.5,6.7-5.8H15z"/>
              <path d="M10,3.2C6.6,3.2,3.8,5.7,3.3,9H5c0.5-2.3,2.5-4.1,5-4.1c2.4,0,4.5,1.7,5,4.1h1.7C16.2,5.7,13.4,3.2,10,3.2z"/>
              <polygon shape-rendering="crispEdges" points="17,3 17,9 11,9 "/>
              <polygon shape-rendering="crispEdges" points="9.1,11 3,11 3,17.1 "/>
              <polygon points="19.9,18.6 15.1,13.8 13.8,15.1 18.6,19.9 "/>
            </svg>
          </span>
          <span class="update" i18n-title="installUpdate">
            <svg class="svg-icon" viewBox="0 0 20 20">
              <polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
              <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
            </svg>
          </span>
          <span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate">
            <svg class="svg-icon" viewBox="0 0 20 20">
              <polygon shape-rendering="crispEdges" points="4,9 8,13 18,3 19,4 8,15 3,10 "/>
            </svg>
          </span>
          <span class="updated" i18n-title="updateCompleted">
            <svg class="svg-icon" viewBox="0 0 20 20">
              <polygon shape-rendering="crispEdges" points="4,9 8,13 18,3 19,4 8,15 3,10 "/>
            </svg>
          </span>
          <span class="update-note"></span>
        </span>
      </p>
      <div class="applies-to">
        <div class="targets"></div>
        <span class="expander">...</span>
      </div>
    </div>
  </template>

  <template data-id="appliesToTarget">
    <span class="target"></span>
  </template>

  <template data-id="appliesToSeparator">
    <span class="sep">, </span>
  </template>

  <template data-id="appliesToEverything">
    <span class="target" i18n-text="appliesToEverything"></span>
  </template>

  <template data-id="extraAppliesTo">
    <details class="applies-to-extra">
      <summary i18n-html="appliesDisplayTruncatedSuffix"></summary>
    </details>
  </template>

  <script src="dom.js"></script>
  <script src="messaging.js"></script>
  <script src="prefs.js"></script>
  <script src="apply.js"></script>
  <script src="localization.js"></script>
  <script src="manage.js"></script>
</head>

<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
<div id="header">
  <h1 id="manage-heading" i18n-text="manageHeading"></h1>
  <fieldset>
    <legend id="filters" i18n-text="manageFilters"></legend>
    <label><input id="manage.onlyEnabled" type="checkbox"><span i18n-text="manageOnlyEnabled"></span></label>
    <label><input id="manage.onlyEdited" type="checkbox"><span i18n-text="manageOnlyEdited"></span></label>
    <label id="onlyUpdates" class="hidden"><input type="checkbox"><span i18n-text="manageOnlyUpdates"></span></label>
    <input id="search" type="search" i18n-placeholder="searchStyles">
  </fieldset>
  <p>
    <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
  </p>
  <p>
    <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
    <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
  </p>
  <p>
    <a href="edit.html">
      <button id="add-style-label" i18n-text="addStyleLabel"></button>
    </a>
  </p>
  <div id="options">
    <h2 id="options-heading" i18n-text="optionsHeading"></h2>
    <label><input id="manage.newUI" type="checkbox"><span i18n-text="manageNewUI"></span></label>
    <div id="newUIoptions">
      <div>
        <input id="manage.newUI.favicons" type="checkbox">
        <label for="manage.newUI.favicons" i18n-text="manageFavicons"></label>
        <svg class="svg-icon info" viewBox="0 0 14 16" i18n-alt="helpAlt" data-toggle-on-click="#faviconsHelp">
          <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
        </svg>
        <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp"></div>
      </div>
      <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
    </div>
    <p>
      <button id="manage-options-button" i18n-text="openOptionsManage"></button>
      <button id="manage-shortcuts-button" class="chromium-only" i18n-text="openOptionsShortcuts"></button>
    </p>
    <p>
      <a id="find-editor-styles" i18n-text="editorStylesButton"
       href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
    <p>
  </div>
  <div id="backup">
    <h2 id="backup-title" i18n-text="backupButtons"></h2>
    <span id="backup-message" i18n-text="backupMessage"></span>
    <p>
      <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
      <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
    </p>
  </div>
  <p id="manage-text" i18n-html="manageText"></p>
</div>
<div id="installed"></div>

<script src="backup/fileSaveLoad.js"></script>
<script src="msgbox/msgbox.js"></script>

</body>
</html>