<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Cookie Dialog Monster > Exclusion List</title>
    <link rel="stylesheet" href="/styles/reset.css" />
    <link rel="stylesheet" href="/styles/options.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />
    <script src="/scripts/options.js"></script>
  </head>
  <body>
    <header>
      <div>
        <h1 class="header-title">
          Cookie Dialog Monster > <span data-i18n="options_exclusionListTitle"></span>
        </h1>
      </div>
    </header>
    <main>
      <div class="button-group">
        <button data-variant="large" id="add-button">
          <span data-i18n="options_addButton"></span>
          <svg
            fill="none"
            height="14"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            stroke="currentColor"
            viewBox="0 0 24 24"
            width="14"
          >
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
        </button>
        <button data-variant="large" id="clear-button">
          <span data-i18n="options_clearButton"></span>
          <svg
            aria-hidden="true"
            fill="none"
            height="14"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            stroke="currentColor"
            viewBox="0 0 24 24"
            width="14"
          >
            <polyline points="3 6 5 6 21 6"></polyline>
            <path
              d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
            />
            <line x1="10" y1="11" x2="10" y2="17"></line>
            <line x1="14" y1="11" x2="14" y2="17"></line>
          </svg>
        </button>
        <button data-variant="large" id="import-button">
          <span data-i18n="options_importButton"></span>
          <svg
            aria-hidden="true"
            fill="none"
            height="14"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            stroke="currentColor"
            viewBox="0 0 24 24"
            width="14"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
          </svg>
          <input accept=".cdm" id="file-input" style="display: none" type="file" />
        </button>
        <button data-variant="large" id="export-button">
          <span data-i18n="options_exportButton"></span>
          <svg
            aria-hidden="true"
            fill="none"
            height="14"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            stroke="currentColor"
            viewBox="0 0 24 24"
            width="14"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
          </svg>
        </button>
      </div>
      <input id="filter-input" data-i18n-placeholder="options_filterPlaceholder" />
      <ul id="exclusion-list">
        <li id="exclusion-list-item-template" style="display: none">
          <span></span>
          <button>
            <svg
              aria-hidden="true"
              fill="none"
              height="14"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              stroke="currentColor"
              viewBox="0 0 24 24"
              width="14"
            >
              <polyline points="3 6 5 6 21 6"></polyline>
              <path
                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
              />
              <line x1="10" y1="11" x2="10" y2="17"></line>
              <line x1="14" y1="11" x2="14" y2="17"></line>
            </svg>
          </button>
        </li>
        <li id="exclusion-list-item-empty" style="display: none"></li>
      </ul>
    </main>
    <footer></footer>
  </body>
</html>