{{#slds-modal close=close tagName='section' classNames='slds-app-launcher' as |modal|}}

  {{yield modal}}


  {{!-- <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-app-launcher" aria-labelledby="header43" aria-modal="true" aria-describedby="modal-content-id-1">
    <div class="slds-modal__container">
      <header class="slds-modal__header slds-app-launcher__header slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
          <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" xmlns:xlink="http://www.w3.org/1999/xlink" />
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
        <h2 id="header43" class="slds-text-heading_medium">App Launcher</h2>
        <div class="slds-app-launcher__header-search">
          <div class="slds-form-element">
            <label for="app-launcher-search" class="slds-form-element__label slds-assistive-text">Find an app</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
              <svg class="slds-input__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search" xmlns:xlink="http://www.w3.org/1999/xlink" />
              </svg>
              <input type="search" class="slds-input" id="app-launcher-search" placeholder="Find an app" />
            </div>
          </div>
        </div>
        <button class="slds-button slds-button_neutral">App Exchange</button>
      </header>
      <div class="slds-modal__content slds-app-launcher__content slds-p-around_medium" id="modal-content-id-1">
        <div class="slds-section slds-is-open">
          <h3 class="slds-section__title">
            <button aria-controls="appsContent" aria-expanded="true" class="slds-button slds-section__title-action">
              <svg class="slds-section__title-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch" xmlns:xlink="http://www.w3.org/1999/xlink" />
              </svg>
              <span class="slds-truncate" title="All Apps">All Apps</span>
            </button>
          </h3>
          <div aria-hidden="false" class="slds-section__content" id="appsContent">
            <div class="slds-assistive-text" id="drag-live-region" aria-live="assertive"></div>
            <div class="slds-assistive-text" id="drag-instructions">Press space bar to move this app within the list.</div>
            <ul class="slds-grid slds-grid_pull-padded slds-wrap">
              <li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
                <a aria-describedby="drag-instructions" draggable="true" href="javascript:void(0);" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
                  <div class="slds-app-launcher__tile-figure">
                    <span class="slds-avatar slds-avatar_large">
                      <abbr class="slds-avatar__initials slds-icon-custom-27" title="company name">SC</abbr>
                    </span>
                    <span class="slds-icon_container" title="Drag item to a new location">
                      <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows" xmlns:xlink="http://www.w3.org/1999/xlink" />
                      </svg>
                    </span>
                  </div>
                  <div class="slds-app-launcher__tile-body">
                    <span class="slds-text-link">Sales Cloud</span>
                    <p>The primary internal Salesforce org. Used to run our...
                      <span class="slds-text-link">More</span>
                    </p>
                  </div>
                </a>
              </li>
              <li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
                <a aria-describedby="drag-instructions" draggable="true" href="javascript:void(0);" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
                  <div class="slds-app-launcher__tile-figure">
                    <span class="slds-avatar slds-avatar_large">
                      <abbr class="slds-avatar__initials slds-icon-custom-59" title="company name">MC</abbr>
                    </span>
                    <span class="slds-icon_container" title="Drag item to a new location">
                      <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows" xmlns:xlink="http://www.w3.org/1999/xlink" />
                      </svg>
                    </span>
                  </div>
                  <div class="slds-app-launcher__tile-body">
                    <span class="slds-text-link">Marketing Cloud</span>
                    <p>Salesforce Marketing Cloud lets businesses of any size...
                      <span class="slds-text-link">More</span>
                    </p>
                  </div>
                </a>
              </li>
              <li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
                <a aria-describedby="drag-instructions" draggable="true" href="javascript:void(0);" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
                  <div class="slds-app-launcher__tile-figure">
                    <span class="slds-avatar slds-avatar_large">
                      <abbr class="slds-avatar__initials slds-icon-custom-10" title="company name">HR</abbr>
                    </span>
                    <span class="slds-icon_container" title="Drag item to a new location">
                      <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows" xmlns:xlink="http://www.w3.org/1999/xlink" />
                      </svg>
                    </span>
                  </div>
                  <div class="slds-app-launcher__tile-body">
                    <span class="slds-text-link">HR Concierge</span>
                    <p>Community for managing employee benefits and time off.
                      <span class="slds-text-link">More</span>
                    </p>
                  </div>
                </a>
              </li>
              <li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
                <a aria-describedby="drag-instructions" draggable="true" href="javascript:void(0);" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
                  <div class="slds-app-launcher__tile-figure">
                    <span class="slds-avatar slds-avatar_large">
                      <abbr class="slds-avatar__initials slds-icon-custom-6" title="company name">MM</abbr>
                    </span>
                    <span class="slds-icon_container" title="Drag item to a new location">
                      <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows" xmlns:xlink="http://www.w3.org/1999/xlink" />
                      </svg>
                    </span>
                  </div>
                  <div class="slds-app-launcher__tile-body">
                    <span class="slds-text-link">My Money</span>
                    <p>Manage your finances across multiple financial platforms...
                      <span class="slds-text-link">More</span>
                    </p>
                  </div>
                </a>
              </li>
              <li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
                <a aria-describedby="drag-instructions" draggable="true" href="javascript:void(0);" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
                  <div class="slds-app-launcher__tile-figure">
                    <span class="slds-avatar slds-avatar_large">
                      <abbr class="slds-avatar__initials slds-icon-custom-91" title="company name">CC</abbr>
                    </span>
                    <span class="slds-icon_container" title="Drag item to a new location">
                      <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows" xmlns:xlink="http://www.w3.org/1999/xlink" />
                      </svg>
                    </span>
                  </div>
                  <div class="slds-app-launcher__tile-body">
                    <span class="slds-text-link">Call Center</span>
                    <p>The key to call center and contact center management is more...
                      <span class="slds-text-link">More</span>
                    </p>
                  </div>
                </a>
              </li>
              <li class="slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3">
                <a aria-describedby="drag-instructions" draggable="true" href="javascript:void(0);" class="slds-app-launcher__tile slds-text-link_reset slds-is-draggable">
                  <div class="slds-app-launcher__tile-figure">
                    <span class="slds-avatar slds-avatar_large">
                      <abbr class="slds-avatar__initials slds-icon-custom-50" title="company name">CS</abbr>
                    </span>
                    <span class="slds-icon_container" title="Drag item to a new location">
                      <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#rows" xmlns:xlink="http://www.w3.org/1999/xlink" />
                      </svg>
                    </span>
                  </div>
                  <div class="slds-app-launcher__tile-body">
                    <span class="slds-text-link">Customer Support Communitiy</span>
                    <p>Areas of Focus are used to track customer support for your...
                      <span class="slds-text-link">More</span>
                    </p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <hr />
        <div class="slds-section slds-is-open">
          <h3 class="slds-section__title">
            <button aria-controls="itemsContent" aria-expanded="true" class="slds-button slds-section__title-action">
              <svg class="slds-section__title-action-icon slds-button__icon slds-button__icon_left" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#switch" xmlns:xlink="http://www.w3.org/1999/xlink" />
              </svg>
              <span class="slds-truncate" title="All Items">All Items</span>
            </button>
          </h3>
          <div aria-hidden="false" class="slds-section__content" id="itemsContent">
            <ul class="slds-grid slds-wrap">
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Accounts">Accounts</a></li>
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Announcements">Announcements</a></li>
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Approvals">Approvals</a></li>
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Campaigns">Campaigns</a></li>
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Cases">Cases</a></li>
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Coaching">Coaching</a></li>
              <li class="slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5"><a href="javascript:void(0);" class="slds-truncate" title="Contacts">Contacts</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section> --}}


{{/slds-modal}}