import { html } from "/js/lib/lit-html.js";
import { classnames } from "/js/utils.js";

export function listIconTemplate({ filled = false } = {}) {
  return html`<div class=${classnames("icon list-icon", { filled })}>
    ${filled
      ? html`<svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M11 5h10m-10 7h10m-10 7h10"
          />
          <rect
            width="4"
            height="4"
            x="3"
            y="3"
            fill="currentColor"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            rx="1"
          />
          <rect
            width="4"
            height="4"
            x="3"
            y="10"
            fill="currentColor"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            rx="1"
          />
          <rect
            width="4"
            height="4"
            x="3"
            y="17"
            fill="currentColor"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            rx="1"
          />
        </svg>`
      : html`<svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M11 5h10m-10 7h10m-10 7h10"
          />
          <rect
            width="4"
            height="4"
            x="3"
            y="3"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            rx="1"
          />
          <rect
            width="4"
            height="4"
            x="3"
            y="10"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            rx="1"
          />
          <rect
            width="4"
            height="4"
            x="3"
            y="17"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            rx="1"
          />
        </svg>`}
  </div>`;
}
