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

exports[`<PinnedMessagesCard /> should show the empty state when there are no pins 1`] = `
<DocumentFragment>
  <div
    class="mx_BaseCard mx_PinnedMessagesCard"
  >
    <div
      class="mx_BaseCard_header"
    >
      <div
        class="mx_BaseCard_header_title"
      >
        <p
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
          Pinned messages
        </p>
      </div>
      <button
        aria-labelledby="«re»"
        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
        data-testid="base-card-close-button"
        role="button"
        style="--cpd-icon-button-size: 28px;"
        tabindex="0"
      >
        <div
          class="_indicator-icon_zr2a0_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
            />
          </svg>
        </div>
      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <div
        class="mx_Flex mx_EmptyState"
        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
      >
        <svg
          fill="currentColor"
          height="32px"
          viewBox="0 0 24 24"
          width="32px"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            clip-rule="evenodd"
            d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
            fill-rule="evenodd"
          />
        </svg>
        <p
          class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
        >
          Pin important messages so that they can be easily discovered
        </p>
        <p
          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
        >
          Select a message and choose “Pin” to it include here.
        </p>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
<DocumentFragment>
  <div
    class="mx_BaseCard mx_PinnedMessagesCard"
  >
    <div
      class="mx_BaseCard_header"
    >
      <div
        class="mx_BaseCard_header_title"
      >
        <p
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
          2 Pinned messages
        </p>
      </div>
      <button
        aria-labelledby="«rk»"
        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
        data-testid="base-card-close-button"
        role="button"
        style="--cpd-icon-button-size: 28px;"
        tabindex="0"
      >
        <div
          class="_indicator-icon_zr2a0_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
            />
          </svg>
        </div>
      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <div
        class="mx_PinnedMessagesCard_wrapper mx_PinnedMessagesCard_wrapper_unpin_all"
        role="list"
      >
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
              title="@alice:example.org"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                aria-labelledby="«rq»"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_m2erp_8"
                data-state="closed"
                id="radix-«rv»"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_zr2a0_17"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <svg
                    fill="currentColor"
                    height="1em"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                    />
                  </svg>
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                The second one
              </div>
            </div>
          </div>
        </div>
        <div
          class="_separator_7ckbw_8 mx_PinnedMessagesCard_Separator"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
              title="@alice:example.org"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                aria-labelledby="«r11»"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_m2erp_8"
                data-state="closed"
                id="radix-«r16»"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_zr2a0_17"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <svg
                    fill="currentColor"
                    height="1em"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                    />
                  </svg>
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                First pinned message
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="mx_PinnedMessagesCard_unpin"
      >
        <button
          class="_button_vczzf_8"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          Unpin all messages
        </button>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
<DocumentFragment>
  <div
    class="mx_BaseCard mx_PinnedMessagesCard"
  >
    <div
      class="mx_BaseCard_header"
    >
      <div
        class="mx_BaseCard_header_title"
      >
        <p
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
          2 Pinned messages
        </p>
      </div>
      <button
        aria-labelledby="«rt2»"
        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
        data-testid="base-card-close-button"
        role="button"
        style="--cpd-icon-button-size: 28px;"
        tabindex="0"
      >
        <div
          class="_indicator-icon_zr2a0_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
            fill="currentColor"
            height="1em"
            viewBox="0 0 24 24"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
            />
          </svg>
        </div>
      </button>
    </div>
    <div
      class="mx_AutoHideScrollbar"
      tabindex="-1"
    >
      <div
        class="mx_PinnedMessagesCard_wrapper"
        role="list"
      >
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
              title="@alice:example.org"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                aria-labelledby="«rt8»"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_m2erp_8"
                data-state="closed"
                id="radix-«rtd»"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_zr2a0_17"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <svg
                    fill="currentColor"
                    height="1em"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                    />
                  </svg>
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                The second one
              </div>
            </div>
          </div>
        </div>
        <div
          class="_separator_7ckbw_8 mx_PinnedMessagesCard_Separator"
          data-kind="primary"
          data-orientation="horizontal"
          role="separator"
        />
        <div
          class="mx_PinnedEventTile"
          role="listitem"
        >
          <div>
            <span
              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
              data-color="3"
              data-testid="avatar-img"
              data-type="round"
              role="presentation"
              style="--cpd-avatar-size: 32px;"
              title="@alice:example.org"
            >
              a
            </span>
          </div>
          <div
            class="mx_PinnedEventTile_wrapper"
          >
            <div
              class="mx_PinnedEventTile_top"
            >
              <span
                aria-labelledby="«rtf»"
                class="mx_PinnedEventTile_sender mx_Username_color3"
              >
                @alice:example.org
              </span>
              <button
                aria-disabled="false"
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
                class="_icon-button_m2erp_8"
                data-state="closed"
                id="radix-«rtk»"
                role="button"
                style="--cpd-icon-button-size: 24px;"
                tabindex="0"
                type="button"
              >
                <div
                  class="_indicator-icon_zr2a0_17"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <svg
                    fill="currentColor"
                    height="1em"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
                    />
                  </svg>
                </div>
              </button>
            </div>
            <div
              class="mx_MTextBody mx_EventTile_content"
            >
              <div
                class="mx_EventTile_body translate"
                dir="auto"
              >
                First pinned message
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
