<!-- Share Project Modal -->
<div class="modal fade" id="shareProject" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="text-center">
          <h4 class="mb-2">Share Project</h4>
          <p>Share project with a team member</p>
        </div>
      </div>
      <div class="mb-6 mx-4 mx-md-0 px-md-6">
        <label for="select2Basic" class="form-label">Add Members</label>
        <select id="select2Basic" class="form-select form-select-lg share-project-select" data-allow-clear="true">
          <option data-name="Adelaide Nichols" data-image="img/avatars/20.png" selected>Adelaide Nichols</option>
          <option data-name="Julian Murphy" data-image="img/avatars/9.png">Julian Murphy</option>
          <option data-name="Sophie Gilbert" data-image="img/avatars/10.png">Sophie Gilbert</option>
          <option data-name="Marvin Wheeler" data-image="img/avatars/17.png">Marvin Wheeler</option>
        </select>
      </div>
      <h5 class="ms-4 ms-md-0 ps-md-6">8 Members</h5>
      <ul class="p-0 m-0 mx-4 mx-md-0 px-md-6">
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/1.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Lester Palmer</p>
              <p class="small mb-0">pe&#64;vogeiz.net</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  Edit</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/2.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Mattie Blair</p>
              <p class="small mb-0">peromak&#64;zukedohik.gov</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span
                  class="me-2 d-none d-sm-inline-block">Owner</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/3.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Marvin Wheeler</p>
              <p class="small mb-0">rumet&#64;jujpejah.net</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  Edit</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/4.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Nannie Ford</p>
              <p class="small mb-0">negza&#64;nuv.io</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  Comment</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/5.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Julian Murphy</p>
              <p class="small mb-0">lunebame&#64;umdomgu.net</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  View</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/6.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Sophie Gilbert</p>
              <p class="small mb-0">ha&#64;sugit.gov</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  View</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap mb-4">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/7.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Chris Watkins</p>
              <p class="small mb-0">zokap&#64;mak.org</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  Comment</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="d-flex flex-wrap">
          <div class="avatar me-4">
            <img src="{{ asset('assets/img/avatars/8.png') }}" alt="avatar" class="rounded-circle" />
          </div>
          <div class="d-flex justify-content-between flex-grow-1">
            <div class="me-2">
              <p class="mb-0 text-heading">Adelaide Nichols</p>
              <p class="small mb-0">ujinomu&#64;jigo.com</p>
            </div>
            <div class="dropdown">
              <button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary"
                data-bs-toggle="dropdown" aria-expanded="false"><span class="me-2 d-none d-sm-inline-block">Can
                  Edit</span></button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Owner</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
                </li>
                <li>
                  <a class="dropdown-item" href="javascript:void(0);">Can View</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
      <div
        class="d-flex align-items-start mt-6 align-items-lg-center mx-4 mx-md-0 mb-4 mb-md-0 p-md-6 pt-0 gap-4 flex-wrap">
        <i class="icon-base bx bx-user text-heading icon-20px"></i>
        <div class="d-flex justify-content-between flex-grow-1 align-items-center flex-wrap gap-2">
          <h6 class="mb-0">Public to {{ config('variables.templateName') }} - {{ config('variables.creatorName') }}
          </h6>
          <button class="btn btn-primary"><i class="icon-base bx bx-link icon-sm me-2"></i>Copy Project Link</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--/ Share Project Modal -->
