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

exports[`PolicyClusterDetail component renders as error 1`] = `
<div
  className="bx--inline-notification bx--inline-notification--error persistent"
  kind="error"
  role="alert"
>
  <div
    className="bx--inline-notification__details"
  >
    <svg
      alt="closes notification"
      aria-label="closes notification"
      className="bx--inline-notification__icon"
      fillRule="evenodd"
      height="16"
      role="img"
      viewBox="0 0 16 16"
      width="16"
    >
      <title>
        closes notification
      </title>
      <path
        d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM3.293 4.707l8 8 1.414-1.414-8-8-1.414 1.414z"
      />
    </svg>
    <div
      className="bx--inline-notification__text-wrapper"
    >
      <p
        className="bx--inline-notification__title"
      >
        
      </p>
      <div
        className="bx--inline-notification__subtitle"
      >
        Provide a subtitle
      </div>
    </div>
  </div>
  <button
    className="bx--inline-notification__close-button"
    onClick={[Function]}
    title="close icon"
    type="button"
  >
    <svg
      alt="close icon"
      aria-label="close icon"
      className="bx--inline-notification__close-icon"
      fillRule="evenodd"
      height="10"
      role="img"
      viewBox="0 0 10 10"
      width="10"
    >
      <title>
        close icon
      </title>
      <path
        d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
      />
    </svg>
  </button>
</div>
`;

exports[`PolicyClusterDetail component renders as loading 1`] = `
<span
  aria-valuetext="Loading..."
  className="pf-c-spinner pf-m-xl patternfly-spinner"
  role="progressbar"
>
  <span
    className="pf-c-spinner__clipper"
  />
  <span
    className="pf-c-spinner__lead-ball"
  />
  <span
    className="pf-c-spinner__tail-ball"
  />
</span>
`;

exports[`PolicyClusterDetail component renders as normal 1`] = `
<div
  className="page-content-container policy-cluster-detail"
  role="main"
>
  <div
    className="overview-content"
  >
    <div
      className="bx--module bx--module--double structured-list-module"
    >
      <div
        className="bx--module__inner"
      >
        <div
          className="bx--module__header"
        >
          <h1
            className="bx--module__title"
          >
            Policy details
          </h1>
        </div>
        <div
          className="bx--module__content"
        >
          <section
            aria-label="Policy details"
            className="bx--structured-list bx--structured-list--condensed"
            role="region"
          >
            <div
              className="bx--structured-list-thead"
            >
              <div
                className="bx--structured-list-row bx--structured-list-row--header-row"
              >
                <div
                  className="bx--structured-list-th"
                >
                  Type
                </div>
                <div
                  className="bx--structured-list-th"
                >
                  Detail
                </div>
              </div>
            </div>
            <div
              className="bx--structured-list-tbody"
              onKeyDown={[Function]}
            >
              <div
                className="bx--structured-list-row"
              >
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    Name
                  </div>
                </div>
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    default.policy-certificatepolicy
                  </div>
                </div>
              </div>
              <div
                className="bx--structured-list-row"
              >
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    Cluster
                  </div>
                </div>
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    calamari
                  </div>
                </div>
              </div>
              <div
                className="bx--structured-list-row"
              >
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    Message
                  </div>
                </div>
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    -
                  </div>
                </div>
              </div>
              <div
                className="bx--structured-list-row"
              >
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    Status
                  </div>
                </div>
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    -
                  </div>
                </div>
              </div>
              <div
                className="bx--structured-list-row"
              >
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    Enforcement
                  </div>
                </div>
                <div
                  className="bx--structured-list-td"
                >
                  <div>
                    inform
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <div
      className="overview-content-right"
    >
      <div
        className="bx--module bx--module--double structured-list-module"
        id="yaml-template"
      >
        <div
          className="bx--module__inner"
        >
          <div>
            <div
              className="bx--module__header"
            >
              <h1
                className="bx--module__title"
              >
                Policy YAML template
              </h1>
            </div>
          </div>
          <div
            className="yamlEditorContainerContainer"
          >
            <div
              className="yamlEditorContainer"
            >
              <div
                className="react-monaco-editor-container"
                style={
                  Object {
                    "height": "100%",
                    "width": "100%",
                  }
                }
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="overview-content-bottom"
    >
      <div
        className="bx--module bx--module--double"
        id="policyPolicyTemplates-module-id"
      >
        <div
          className="bx--module__inner"
        >
          <div
            className="bx--module__header"
          >
            <h1
              className="bx--module__title"
            >
              Policy templates
            </h1>
          </div>
          <div
            className="bx--module__content"
          >
            <div
              className="bx--data-table-v2-container"
              id="policyTemplates-table-container"
            >
              <section
                aria-label="policyTemplates-search"
                className="bx--table-toolbar"
                role="region"
              >
                <div
                  className="bx--toolbar-search-container"
                >
                  <div
                    aria-labelledby="policyTemplates-search-label"
                    className="bx--search bx--search--sm bx--search--light"
                    role="search"
                  >
                    <svg
                      alt="Filter table"
                      aria-label="Filter table"
                      className="bx--search-magnifier"
                      fillRule="evenodd"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                    >
                      <title>
                        Filter table
                      </title>
                      <path
                        d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
                      />
                    </svg>
                    <label
                      className="bx--label"
                      htmlFor="policyTemplates-search"
                      id="policyTemplates-search-label"
                    >
                      Filter table
                    </label>
                    <input
                      aria-label="policyTemplates-search"
                      className="bx--search-input"
                      id="policyTemplates-search"
                      onChange={[Function]}
                      placeholder="Search"
                      type="text"
                      value=""
                    />
                    <button
                      className="bx--search-close bx--search-close--hidden"
                      onClick={[Function]}
                      type="button"
                    >
                      <svg
                        alt="Provide a description that will be used as the title"
                        aria-label="Provide a description that will be used as the title"
                        fillRule="evenodd"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                      >
                        <title>
                          Provide a description that will be used as the title
                        </title>
                        <path
                          d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  className="bx--toolbar-content"
                />
              </section>
              <table
                className="bx--data-table-v2 resource-table bx--data-table-v2--zebra"
              >
                <thead>
                  <tr>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="name"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Name
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="apiVersion"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          API version
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="kind"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Kind
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="compliant"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Compliant
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    data-row-name="policy-certificatepolicy-example"
                  >
                    <td>
                      policy-certificatepolicy-example
                    </td>
                    <td>
                      policy.open-cluster-management.io/v1
                    </td>
                    <td>
                      CertificatePolicy
                    </td>
                    <td>
                      -
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              className="bx--pagination"
              disabled={false}
            >
              <div
                className="bx--pagination__left"
              >
                <span
                  className="bx--pagination__text"
                >
                  items per page
                </span>
                <div
                  className="bx--form-item"
                >
                  <div
                    className="bx--select bx--select--inline"
                  >
                    <label
                      className="bx--label bx--visually-hidden"
                      htmlFor="bx-pagination-select-policyTemplates-resource-table-pagination"
                    >
                      items per page
                    </label>
                    <select
                      className="bx--select-input"
                      id="bx-pagination-select-policyTemplates-resource-table-pagination"
                      onChange={[Function]}
                      value={10}
                    >
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={5}
                      >
                        5
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={10}
                      >
                        10
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={20}
                      >
                        20
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={50}
                      >
                        50
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={75}
                      >
                        75
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={100}
                      >
                        100
                      </option>
                    </select>
                    <svg
                      alt="open list of options"
                      aria-label="open list of options"
                      className="bx--select__arrow"
                      fillRule="evenodd"
                      height="5"
                      role="img"
                      viewBox="0 0 10 5"
                      width="10"
                    >
                      <title>
                        open list of options
                      </title>
                      <path
                        d="M0 0l5 4.998L10 0z"
                      />
                    </svg>
                  </div>
                </div>
                <span
                  className="bx--pagination__text"
                >
                   |  
                  {0}-{1} of {0} items
                </span>
              </div>
              <div
                className="bx--pagination__right bx--pagination--inline"
              >
                <span
                  className="bx--pagination__text"
                >
                  {0} of {1} pages
                </span>
                <button
                  aria-label="Previous page"
                  className="bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"
                  disabled={true}
                  onClick={[Function]}
                >
                  <svg
                    alt="Previous page"
                    aria-label="Previous page"
                    className="bx--pagination__button-icon"
                    fillRule="evenodd"
                    height="12"
                    role="img"
                    viewBox="0 0 7 12"
                    width="7"
                  >
                    <title>
                      Previous page
                    </title>
                    <path
                      d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"
                    />
                  </svg>
                </button>
                <div
                  className="bx--form-item"
                >
                  <div
                    className="bx--select bx--select--inline"
                  >
                    <label
                      className="bx--label bx--visually-hidden"
                      htmlFor="bx-pagination-select-policyTemplates-resource-table-pagination2"
                    >
                      items per page
                    </label>
                    <select
                      className="bx--select-input"
                      id="bx-pagination-select-policyTemplates-resource-table-pagination2"
                      onChange={[Function]}
                      value={1}
                    >
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={1}
                      >
                        1
                      </option>
                    </select>
                    <svg
                      alt="open list of options"
                      aria-label="open list of options"
                      className="bx--select__arrow"
                      fillRule="evenodd"
                      height="5"
                      role="img"
                      viewBox="0 0 10 5"
                      width="10"
                    >
                      <title>
                        open list of options
                      </title>
                      <path
                        d="M0 0l5 4.998L10 0z"
                      />
                    </svg>
                  </div>
                </div>
                <button
                  aria-label="Next page"
                  className="bx--pagination__button bx--pagination__button--forward"
                  disabled={true}
                  onClick={[Function]}
                >
                  <svg
                    alt="Next page"
                    aria-label="Next page"
                    className="bx--pagination__button-icon"
                    fillRule="evenodd"
                    height="12"
                    role="img"
                    viewBox="0 0 7 12"
                    width="7"
                  >
                    <title>
                      Next page
                    </title>
                    <path
                      d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="bx--module bx--module--double"
        id="policyViolations-module-id"
      >
        <div
          className="bx--module__inner"
        >
          <div
            className="bx--module__header"
          >
            <h1
              className="bx--module__title"
            >
              Details
            </h1>
          </div>
          <div
            className="bx--module__content"
          >
            <div
              className="bx--data-table-v2-container"
              id="violations-table-container"
            >
              <section
                aria-label="violations-search"
                className="bx--table-toolbar"
                role="region"
              >
                <div
                  className="bx--toolbar-search-container"
                >
                  <div
                    aria-labelledby="violations-search-label"
                    className="bx--search bx--search--sm bx--search--light"
                    role="search"
                  >
                    <svg
                      alt="Filter table"
                      aria-label="Filter table"
                      className="bx--search-magnifier"
                      fillRule="evenodd"
                      height="16"
                      role="img"
                      viewBox="0 0 16 16"
                      width="16"
                    >
                      <title>
                        Filter table
                      </title>
                      <path
                        d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
                      />
                    </svg>
                    <label
                      className="bx--label"
                      htmlFor="violations-search"
                      id="violations-search-label"
                    >
                      Filter table
                    </label>
                    <input
                      aria-label="violations-search"
                      className="bx--search-input"
                      id="violations-search"
                      onChange={[Function]}
                      placeholder="Search"
                      type="text"
                      value=""
                    />
                    <button
                      className="bx--search-close bx--search-close--hidden"
                      onClick={[Function]}
                      type="button"
                    >
                      <svg
                        alt="Provide a description that will be used as the title"
                        aria-label="Provide a description that will be used as the title"
                        fillRule="evenodd"
                        height="16"
                        role="img"
                        viewBox="0 0 16 16"
                        width="16"
                      >
                        <title>
                          Provide a description that will be used as the title
                        </title>
                        <path
                          d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  className="bx--toolbar-content"
                />
              </section>
              <table
                className="bx--data-table-v2 resource-table bx--data-table-v2--zebra"
              >
                <thead>
                  <tr>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="name"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Name
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="cluster"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Cluster
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="message"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Message
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                    <th
                      scope="col"
                    >
                      <div
                        className="bx--table-sort-v2 bx--table-sort-v2--ascending"
                        data-default-key="name"
                        data-key="timestamp"
                        onClick={[Function]}
                        onKeyPress={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Sort rows by this header in ascending order."
                      >
                        <span
                          className="bx--table-header-label"
                        >
                          Last Report
                        </span>
                        
                        <svg
                          alt="Sort rows by this header in ascending order."
                          aria-label="Sort rows by this header in ascending order."
                          className="bx--table-sort-v2__icon"
                          fillRule="evenodd"
                          height="5"
                          name="caret--down"
                          role="img"
                          viewBox="0 0 10 5"
                          width="10"
                        >
                          <title>
                            Sort rows by this header in ascending order.
                          </title>
                          <path
                            d="M0 0l5 4.998L10 0z"
                          />
                        </svg>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    data-row-name="policy-certificatepolicy-example"
                  >
                    <td>
                      policy-certificatepolicy-example
                    </td>
                    <td>
                      calamari
                    </td>
                    <td>
                      NonCompliant; 1 certificates expire in less than 300h0m0s: default:rsa-ca-sample-secret
                    </td>
                    <td>
                      2020-06-15T15:00:07Z
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              className="bx--pagination"
              disabled={false}
            >
              <div
                className="bx--pagination__left"
              >
                <span
                  className="bx--pagination__text"
                >
                  items per page
                </span>
                <div
                  className="bx--form-item"
                >
                  <div
                    className="bx--select bx--select--inline"
                  >
                    <label
                      className="bx--label bx--visually-hidden"
                      htmlFor="bx-pagination-select-violations-resource-table-pagination"
                    >
                      items per page
                    </label>
                    <select
                      className="bx--select-input"
                      id="bx-pagination-select-violations-resource-table-pagination"
                      onChange={[Function]}
                      value={10}
                    >
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={5}
                      >
                        5
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={10}
                      >
                        10
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={20}
                      >
                        20
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={50}
                      >
                        50
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={75}
                      >
                        75
                      </option>
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={100}
                      >
                        100
                      </option>
                    </select>
                    <svg
                      alt="open list of options"
                      aria-label="open list of options"
                      className="bx--select__arrow"
                      fillRule="evenodd"
                      height="5"
                      role="img"
                      viewBox="0 0 10 5"
                      width="10"
                    >
                      <title>
                        open list of options
                      </title>
                      <path
                        d="M0 0l5 4.998L10 0z"
                      />
                    </svg>
                  </div>
                </div>
                <span
                  className="bx--pagination__text"
                >
                   |  
                  {0}-{1} of {0} items
                </span>
              </div>
              <div
                className="bx--pagination__right bx--pagination--inline"
              >
                <span
                  className="bx--pagination__text"
                >
                  {0} of {1} pages
                </span>
                <button
                  aria-label="Previous page"
                  className="bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"
                  disabled={true}
                  onClick={[Function]}
                >
                  <svg
                    alt="Previous page"
                    aria-label="Previous page"
                    className="bx--pagination__button-icon"
                    fillRule="evenodd"
                    height="12"
                    role="img"
                    viewBox="0 0 7 12"
                    width="7"
                  >
                    <title>
                      Previous page
                    </title>
                    <path
                      d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"
                    />
                  </svg>
                </button>
                <div
                  className="bx--form-item"
                >
                  <div
                    className="bx--select bx--select--inline"
                  >
                    <label
                      className="bx--label bx--visually-hidden"
                      htmlFor="bx-pagination-select-violations-resource-table-pagination2"
                    >
                      items per page
                    </label>
                    <select
                      className="bx--select-input"
                      id="bx-pagination-select-violations-resource-table-pagination2"
                      onChange={[Function]}
                      value={1}
                    >
                      <option
                        className="bx--select-option"
                        disabled={false}
                        hidden={false}
                        value={1}
                      >
                        1
                      </option>
                    </select>
                    <svg
                      alt="open list of options"
                      aria-label="open list of options"
                      className="bx--select__arrow"
                      fillRule="evenodd"
                      height="5"
                      role="img"
                      viewBox="0 0 10 5"
                      width="10"
                    >
                      <title>
                        open list of options
                      </title>
                      <path
                        d="M0 0l5 4.998L10 0z"
                      />
                    </svg>
                  </div>
                </div>
                <button
                  aria-label="Next page"
                  className="bx--pagination__button bx--pagination__button--forward"
                  disabled={true}
                  onClick={[Function]}
                >
                  <svg
                    alt="Next page"
                    aria-label="Next page"
                    className="bx--pagination__button-icon"
                    fillRule="evenodd"
                    height="12"
                    role="img"
                    viewBox="0 0 7 12"
                    width="7"
                  >
                    <title>
                      Next page
                    </title>
                    <path
                      d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
