// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`WebhookForm creates snapshot 1`] = `
<DocumentFragment>
  <div>
    <div
      class="mb-4 pb-2 border-bottom border-1"
    >
      <button
        aria-label="Back to webhooks list"
        class="btn btn-link text-dark btn-sm ps-0 d-flex align-items-center link"
      >
        <svg
          class="me-2"
          fill="currentColor"
          height="1em"
          stroke="currentColor"
          stroke-width="0"
          viewBox="0 0 512 512"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z"
          />
        </svg>
        Back to webhooks list
      </button>
    </div>
    <div
      class="mt-2"
    >
      <form
        autocomplete="off"
        class="w-100 needs-validation"
        data-testid="webhookForm"
        novalidate=""
      >
        <div
          class="d-flex"
        >
          <div
            class="col-md-8"
          >
            <div
              class="mb-4 position-relative undefined"
            >
              <label
                class="form-label fw-bold label"
                for="name"
              >
                <span
                  class="fw-bold"
                >
                  Name
                </span>
                <small
                  class="ms-1 fst-italic"
                >
                  (Required)
                </small>
              </label>
              <input
                class="form-control"
                data-testid="nameInput"
                id="name"
                name="name"
                required=""
                spellcheck="false"
                type="text"
                value="Webhook name"
              />
              <div
                class="invalid-feedback mt-0 inputFeedback"
              >
                This field is required
              </div>
            </div>
          </div>
        </div>
        <div
          class="d-flex"
        >
          <div
            class="col-md-8"
          >
            <div
              class="mb-4 position-relative undefined"
            >
              <label
                class="form-label fw-bold label"
                for="description"
              >
                <span
                  class="fw-bold"
                >
                  Description
                </span>
              </label>
              <input
                class="form-control"
                data-testid="descriptionInput"
                id="description"
                name="description"
                spellcheck="false"
                type="text"
                value="this is a test description"
              />
              <div
                class="invalid-feedback mt-0 inputFeedback"
              />
            </div>
          </div>
        </div>
        <div>
          <label
            class="form-label fw-bold label"
            for="url"
          >
            Url
            <small
              class="ms-1 fst-italic"
            >
              (Required)
            </small>
          </label>
          <div
            class="form-text text-muted mb-2 mt-0"
          >
            A POST request will be sent to the provided URL when any of the events selected in the triggers section happens.
          </div>
          <div
            class="d-flex"
          >
            <div
              class="col-md-8"
            >
              <div
                class="mb-4 position-relative undefined"
              >
                <input
                  class="form-control"
                  data-testid="urlInput"
                  id="url"
                  name="url"
                  required=""
                  spellcheck="false"
                  type="url"
                  value="http://jksdhfkjfds"
                />
                <div
                  class="invalid-feedback mt-0 inputFeedback"
                >
                  This field is required
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <label
            class="form-label fw-bold label"
            for="secret"
          >
            Secret
          </label>
          <div
            class="form-text text-muted mb-2 mt-0"
          >
            If you provide a secret, we'll send it to you in the 
            <span
              class="fw-bold"
            >
              X-ArtifactHub-Secret
            </span>
             header on each request. This will allow you to validate that the request comes from ArtifactHub.
          </div>
          <div
            class="d-flex"
          >
            <div
              class="col-md-8"
            >
              <div
                class="mb-4 position-relative undefined"
              >
                <input
                  class="form-control"
                  data-testid="secretInput"
                  id="secret"
                  name="secret"
                  spellcheck="false"
                  type="text"
                  value=""
                />
                <div
                  class="invalid-feedback mt-0 inputFeedback"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="mb-3"
        >
          <div
            class="form-check form-switch ps-0"
          >
            <label
              class="form-check-label fw-bold label"
              for="active"
            >
              Active
            </label>
            <input
              checked=""
              class="position-absolute ms-2 form-check-input checkbox"
              id="active"
              role="switch"
              type="checkbox"
              value="true"
            />
          </div>
          <div
            class="form-text text-muted mt-2"
          >
            This flag indicates if the webhook is active or not. Inactive webhooks will not receive notifications.
          </div>
        </div>
        <div
          class="h4 pb-2 mt-4 mt-md-5 mb-4 border-bottom border-1"
        >
          Triggers
        </div>
        <div
          class="my-4"
        >
          <label
            class="form-label fw-bold label"
            for="kind"
            id="events-group"
          >
            Events
          </label>
          <div
            aria-labelledby="events-group"
            role="group"
          >
            <div
              class="form-check me-sm-2 mb-2 undefined"
            >
              <input
                aria-checked="true"
                checked=""
                class="form-check-input input"
                id="all-eventKind-0"
                name="eventKind"
                tabindex="0"
                type="checkbox"
                value="0"
              />
              <label
                class="form-check-label label undefined"
                data-testid="checkboxLabel"
                for="all-eventKind-0"
              >
                <div
                  class="d-flex align-items-baseline mw-100"
                >
                  <span
                    class="d-inline-block text-truncate"
                  >
                    New releases
                  </span>
                </div>
              </label>
            </div>
            <div
              class="form-check me-sm-2 mb-2 undefined"
            >
              <input
                aria-checked="false"
                class="form-check-input input"
                id="all-eventKind-1"
                name="eventKind"
                tabindex="0"
                type="checkbox"
                value="1"
              />
              <label
                class="form-check-label label undefined"
                data-testid="checkboxLabel"
                for="all-eventKind-1"
              >
                <div
                  class="d-flex align-items-baseline mw-100"
                >
                  <span
                    class="d-inline-block text-truncate"
                  >
                    Security alerts
                  </span>
                </div>
              </label>
            </div>
          </div>
        </div>
        <div
          class="mb-4"
        >
          <label
            class="form-label fw-bold label"
            for="packages"
            id="webhook-pkg-list"
          >
            Packages
            <small
              class="ms-1 fst-italic"
            >
              (Required)
            </small>
          </label>
          <div
            class="form-text text-muted mb-4 mt-0"
          >
            When the events selected happen for any of the packages you've chosen, a notification will be triggered and the configured url will be called. At least one package must be selected.
          </div>
          <div
            class="mb-3 row"
          >
            <div
              class="col-12 col-xxl-10 col-xxxl-8"
            >
              <div
                class="position-relative"
              >
                <div
                  class="d-flex flex-row"
                >
                  <div
                    class="flex-grow-1 d-flex align-items-stretch overflow-hidden position-relative lh-base bg-white searchBar inputWrapper"
                  >
                    <div
                      class="d-flex align-items-center iconWrapper"
                      data-testid="searchPkgIcon"
                    >
                      <svg
                        fill="none"
                        height="1em"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          cx="11"
                          cy="11"
                          r="8"
                        />
                        <line
                          x1="21"
                          x2="16.65"
                          y1="21"
                          y2="16.65"
                        />
                      </svg>
                    </div>
                    <input
                      aria-label="Search packages"
                      autocomplete="new-input"
                      class="flex-grow-1 pe-4 ps-2 ps-md-0 border-0 shadow-none bg-transparent input"
                      name="searchInput"
                      spellcheck="false"
                      type="text"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="row"
          >
            <div
              class="col-12 col-xxl-10 col-xxxl-8"
            >
              <table
                class="table table-hover table-sm border border-1 transparentBorder text-break table"
              >
                <thead>
                  <tr
                    class="tableTitle"
                  >
                    <th
                      class="align-middle d-none d-sm-table-cell fitCell"
                      scope="col"
                    />
                    <th
                      class="align-middle packageCell"
                      scope="col"
                    >
                      Package
                    </th>
                    <th
                      class="align-middle w-50 d-none d-sm-table-cell"
                      scope="col"
                    >
                      Publisher
                    </th>
                    <th
                      class="align-middle fitCell"
                      scope="col"
                    />
                  </tr>
                </thead>
                <tbody
                  class="body"
                >
                  <tr
                    data-testid="packageTableCell"
                  >
                    <td
                      class="align-middle text-center d-none d-sm-table-cell"
                    >
                      <img
                        alt="Icon"
                        class="icon h-auto mx-2 iconLight"
                        src="/static/media/helm-chart.svg"
                      />
                      <img
                        alt="Icon"
                        class="icon h-auto mx-2 iconDark"
                        src="/static/media/helm-chart-light.svg"
                      />
                    </td>
                    <td
                      class="align-middle"
                    >
                      <div
                        class="d-flex flex-row align-items-center"
                      >
                        <img
                          alt="envoy"
                          aria-hidden="true"
                          class="fs-4 image"
                          src="/image/c5cfce82-9b0c-4a26-9a8d-c9d0fd5aa2cc"
                          srcset="/image/c5cfce82-9b0c-4a26-9a8d-c9d0fd5aa2cc@1x 1x, /image/c5cfce82-9b0c-4a26-9a8d-c9d0fd5aa2cc@2x 2x, /image/c5cfce82-9b0c-4a26-9a8d-c9d0fd5aa2cc@3x 3x, /image/c5cfce82-9b0c-4a26-9a8d-c9d0fd5aa2cc@4x 4x"
                        />
                        <div
                          class="ms-2 text-dark cellWrapper"
                        >
                          <div
                            class="text-truncate"
                          >
                            envoy
                            <span
                              class="d-inline d-sm-none legend"
                            >
                              <span
                                class="mx-2"
                              >
                                /
                              </span>
                              Helm
                              <small
                                class="ms-2"
                              >
                                (
                                <span
                                  class="text-uppercase text-muted d-none d-sm-inline legend"
                                >
                                  Repo: 
                                </span>
                                <span
                                  class="text-dark"
                                >
                                  Stable
                                </span>
                                )
                              </small>
                            </span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="align-middle position-relative text-dark d-none d-sm-table-cell"
                    >
                      <div
                        class="d-table w-100 cellWrapper"
                      >
                        <div
                          class="text-truncate"
                        >
                          Helm
                          <small
                            class="ms-2"
                          >
                            (
                            <span
                              class="text-uppercase text-muted d-none d-sm-inline legend"
                            >
                              Repo: 
                            </span>
                            <span
                              class="text-dark"
                            >
                              Stable
                            </span>
                            )
                          </small>
                        </div>
                      </div>
                    </td>
                    <td
                      class="align-middle"
                    >
                      <button
                        aria-label="Delete package from webhook"
                        class="btn btn-link btn-sm mx-2 closeBtn"
                        type="button"
                      >
                        <svg
                          class="text-danger fs-5"
                          fill="currentColor"
                          height="1em"
                          stroke="currentColor"
                          stroke-width="0"
                          viewBox="0 0 24 24"
                          width="1em"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                          <path
                            d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                          />
                        </svg>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div
          class="h4 pb-2 mt-4 mt-md-5 mb-4 border-bottom border-1"
        >
          Payload
        </div>
        <div
          class="d-flex flex-row mb-3"
        >
          <div
            class="form-check me-4"
          >
            <input
              class="form-check-input"
              id="payload_0"
              name="payloadKind"
              type="radio"
              value="defaultPayload"
            />
            <label
              class="form-check-label"
              for="payload_0"
            >
              Default payload
            </label>
          </div>
          <div
            class="form-check me-4"
          >
            <input
              checked=""
              class="form-check-input"
              id="payload_1"
              name="payloadKind"
              type="radio"
              value="customPayload"
            />
            <label
              class="form-check-label"
              for="payload_1"
            >
              Custom payload
            </label>
          </div>
        </div>
        <div
          class="lh-base"
        >
          <div
            class="form-text text-muted mb-3"
          >
            It's possible to customize the payload used to notify your service. This may help integrating ArtifactHub webhooks with other services without requiring you to write any code. To integrate ArtifactHub webhooks with Slack, for example, you could use a custom payload using the following template:
            <div
              class="my-3 w-100"
            >
              <div
                aria-atomic="true"
                aria-live="off"
                class="alert alert-light text-nowrap codeWrapper"
                role="alert"
              >
                {
                <br />
                <span
                  class="ms-3"
                >
                  "text": "Package 
                  <span
                    class="fw-bold"
                  >
                    {{ .Package.Name }}
                  </span>
                   version 
                  <span
                    class="fw-bold"
                  >
                    {{ .Package.Version }}
                  </span>
                   released! 
                  <span
                    class="fw-bold"
                  >
                    {{ .Package.URL }}
                  </span>
                  "
                  <br />
                  }
                </span>
              </div>
            </div>
          </div>
        </div>
        <div
          class="d-flex"
        >
          <div
            class="col-md-8"
          >
            <div
              class="mb-4 position-relative undefined"
            >
              <label
                class="form-label fw-bold label"
                for="contentType"
              >
                <span
                  class="fw-bold"
                >
                  Request Content-Type
                </span>
              </label>
              <input
                class="form-control"
                data-testid="contentTypeInput"
                id="contentType"
                name="contentType"
                placeholder="application/json"
                required=""
                spellcheck="false"
                type="text"
                value="application/json"
              />
              <div
                class="invalid-feedback mt-0 inputFeedback"
              >
                This field is required
              </div>
            </div>
          </div>
        </div>
        <div
          class=" mb-4"
        >
          <label
            class="form-label fw-bold label"
            for="template"
          >
            Template
          </label>
          <div
            class="form-text text-muted mb-4 mt-0"
          >
            Custom payloads are generated using 
            <a
              aria-label="Open Go templates documentation"
              class="link fw-bold text-dark"
              href="https://golang.org/pkg/text/template/"
              rel="noopener noreferrer"
              role="button"
              tabindex="-1"
              target="_blank"
            >
              Go templates
            </a>
            . Below you will find a list of the variables available for use in your template.
          </div>
          <div
            class="row"
          >
            <div
              class="col col-xxl-10 col-xxxl-8"
            >
              <textarea
                class="form-control textarea"
                id="template"
                name="template"
                required=""
                rows="13"
                spellcheck="false"
                wrap="off"
              >
                {
    "event": {
        "id": "{{ .Event.ID }}",
        "kind": {{ .Event.Kind }}
    },
    "package": {
        "kind": {{ .Package.Kind }},
        "name": "{{ .Package.Name }}",
        "version": "{{ .Package.Version }}",
        "publisher": "{{ .Package.Publisher }}",
        "url": "{{ .Package.URL }}"
    }
}
              </textarea>
              <div
                class="invalid-feedback mt-0"
              >
                This field is required
              </div>
            </div>
          </div>
        </div>
        <div
          class="mb-3"
        >
          <label
            class="form-label fw-bold label"
            for="template"
          >
            Variables reference
          </label>
          <div
            class="row"
          >
            <div
              class="col col-xxxl-8 overflow-auto"
            >
              <small
                class="text-muted tableWrapper"
              >
                <table
                  class="table table-sm border border-1 variablesTable"
                >
                  <tbody>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .BaseURL }}
                        </span>
                      </th>
                      <td>
                        Artifact Hub deployment base url.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Event.ID }}
                        </span>
                      </th>
                      <td>
                        Id of the event triggering the notification.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Event.Kind }}
                        </span>
                      </th>
                      <td>
                        Kind of the event triggering notification. Possible values are 
                        <span
                          class="fw-bold"
                        >
                          package.new-release
                        </span>
                         and 
                        <span
                          class="fw-bold"
                        >
                          package.security-alert
                        </span>
                        .
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Name }}
                        </span>
                      </th>
                      <td>
                        Name of the package.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Version }}
                        </span>
                      </th>
                      <td>
                        Version of the new release.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.URL }}
                        </span>
                      </th>
                      <td>
                        ArtifactHub URL of the package.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Changes }}
                        </span>
                      </th>
                      <td>
                        List of changes this package version introduces.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Changes[i].Kind }}
                        </span>
                      </th>
                      <td>
                        Kind of the change. Possible values are 
                        <span
                          class="fw-bold"
                        >
                          added
                        </span>
                        , 
                        <span
                          class="fw-bold"
                        >
                          changed
                        </span>
                        , 
                        <span
                          class="fw-bold"
                        >
                          deprecated
                        </span>
                        , 
                        <span
                          class="fw-bold"
                        >
                          removed
                        </span>
                        , 
                        <span
                          class="fw-bold"
                        >
                          fixed
                        </span>
                         and 
                        <span
                          class="fw-bold"
                        >
                          security
                        </span>
                        . When the change kind is not provided, the value will be empty.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Changes[i].Description }}
                        </span>
                      </th>
                      <td>
                        Brief text explaining the change.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Changes[i].Links }}
                        </span>
                      </th>
                      <td>
                        List of links related to the change.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Changes[i].Links[i].Name }}
                        </span>
                      </th>
                      <td>
                        Name of the link.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Changes[i].Links[i].URL }}
                        </span>
                      </th>
                      <td>
                        Url of the link.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.ContainsSecurityUpdates }}
                        </span>
                      </th>
                      <td>
                        Boolean flag that indicates whether this package contains security updates or not.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Prerelease }}
                        </span>
                      </th>
                      <td>
                        Boolean flag that indicates whether this package version is a pre-release or not.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Repository.Kind }}
                        </span>
                      </th>
                      <td>
                        Kind of the repository associated with the notification. Possible values are 
                        <span
                          class="fw-bold"
                        >
                          falco
                        </span>
                        , 
                        <span
                          class="fw-bold"
                        >
                          helm
                        </span>
                        , 
                        <span
                          class="fw-bold"
                        >
                          olm
                        </span>
                         and 
                        <span
                          class="fw-bold"
                        >
                          opa
                        </span>
                        .
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Repository.Name }}
                        </span>
                      </th>
                      <td>
                        Name of the repository.
                      </td>
                    </tr>
                    <tr>
                      <th
                        scope="row"
                      >
                        <span
                          class="text-nowrap"
                        >
                          {{ .Package.Repository.Publisher }}
                        </span>
                      </th>
                      <td>
                        Publisher of the repository. If the owner is a user it'll be the user alias. If it's an organization, it'll be the organization name.
                      </td>
                    </tr>
                  </tbody>
                </table>
              </small>
            </div>
          </div>
        </div>
        <div
          class="mt-4 mt-md-5 btnWrapper"
        >
          <div
            class="d-flex flex-row justify-content-between"
          >
            <div
              class="d-flex flex-row align-items-center me-3"
            >
              <button
                aria-label="Test webhook"
                class="btn btn-sm btn-success"
                type="button"
              >
                <div
                  class="d-flex flex-row align-items-center text-uppercase"
                >
                  <svg
                    class="me-2"
                    fill="currentColor"
                    height="1em"
                    stroke="currentColor"
                    stroke-width="0"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M17 2V4H16V18C16 20.2091 14.2091 22 12 22C9.79086 22 8 20.2091 8 18V4H7V2H17ZM13 15C12.4477 15 12 15.4477 12 16C12 16.5523 12.4477 17 13 17C13.5523 17 14 16.5523 14 16C14 15.4477 13.5523 15 13 15ZM11 12C10.4477 12 10 12.4477 10 13C10 13.5523 10.4477 14 11 14C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12ZM14 4H10V8H14V4Z"
                    />
                  </svg>
                   
                  <div>
                    Test 
                    <span
                      class="d-none d-sm-inline-block"
                    >
                      webhook
                    </span>
                  </div>
                </div>
              </button>
            </div>
            <div
              class="ms-auto"
            >
              <button
                aria-label="Cancel"
                class="btn btn-sm btn-outline-secondary me-3"
                type="button"
              >
                <div
                  class="d-flex flex-row align-items-center text-uppercase"
                >
                  <svg
                    class="me-2"
                    fill="currentColor"
                    height="1em"
                    stroke="currentColor"
                    stroke-width="0"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                    <path
                      d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                    />
                  </svg>
                  <div>
                    Cancel
                  </div>
                </div>
              </button>
              <button
                aria-label="Add webhook"
                class="btn btn-sm btn-outline-secondary"
                type="button"
              >
                <div
                  class="d-flex flex-row align-items-center text-uppercase"
                >
                  <svg
                    class="me-2"
                    fill="currentColor"
                    height="1em"
                    stroke="currentColor"
                    stroke-width="0"
                    viewBox="0 0 512 512"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                    />
                  </svg>
                  <div>
                    Save
                  </div>
                </div>
              </button>
            </div>
          </div>
          <div />
        </div>
      </form>
    </div>
  </div>
</DocumentFragment>
`;
