<aside class="sidebar" [ngClass]="sideBarExpanded ? 'active' : ''" data-sidebar>

    <div class="sidebar-info" ng-init="let displayName = ">

      <figure class="avatar-box">
        <img src="./assets/images/my-pic.png" alt="{{model.candidate?.displayName}}" width="80">
      </figure>

      <div class="info-content">
        <h1 class="name" title="{{model.candidate?.displayName}}">{{model.candidate?.displayName}}</h1>

        <p class="title">{{model.title}}</p>
      </div>

      <button class="info_more-btn" (click)="sideBarExpanded = !sideBarExpanded" data-sidebar-btn>
        <span>Show Contacts</span>

        <i class="fa-regular fa-chevron-down"></i>
      </button>

    </div>

    <div class="sidebar-info_more">

      <div class="separator"></div>

      <ul class="contacts-list">

        <li class="contact-item">

          <div class="icon-box">
            <i class="fa-light fa-envelope"></i>
          </div>

          <div class="contact-info">
            <p class="contact-title">Email</p>

            <a href="mailto:{{model.candidate?.email}}" class="contact-link">{{model.candidate?.email}}</a>
          </div>

        </li>

        <li class="contact-item">

          <div class="icon-box">
            <i class="fa-light fa-mobile-notch"></i>
          </div>

          <div class="contact-info">
            <p class="contact-title">Phone</p>

            <a href="tel:{{model.candidate?.phone}}" class="contact-link">{{model.candidate?.phone}}</a>
          </div>

        </li>

        <li class="contact-item">

          <div class="icon-box">
            <i class="fa-regular fa-cake-candles"></i>
          </div>

          <div class="contact-info">
            <p class="contact-title">Birthday</p>

            <time>{{model.candidate?.dob}}</time>
          </div>

        </li>

        <li class="contact-item">

          <div class="icon-box">
            <i class="fa-light fa-location-dot"></i>
          </div>

          <div class="contact-info">
            <p class="contact-title">Location</p>

            <address>{{model.candidate?.address}}</address>
          </div>

        </li>

      </ul>

      <div class="separator"></div>

      <ul class="social-list">

        <li class="social-item" *ngIf="model.socialLinks?.linkedin">
            <a href="{{model.socialLinks?.linkedin}}" target="_blank" class="social-link">
              <i class="fa-brands fa-linkedin"></i>
            </a>
          </li>

          <li class="social-item" *ngIf="model.socialLinks?.gitHub">
            <a href="{{model.socialLinks?.gitHub}}" target="_blank" class="social-link">
              <i class="fa-brands fa-github"></i>
            </a>
          </li>

        <li class="social-item" *ngIf="model.socialLinks?.blogUrl">
          <a href="{{model.socialLinks?.blogUrl}}" target="_blank" class="social-link">
            <i class="fa-duotone fa-blog"></i>
          </a>
        </li>
      </ul>

    </div>

  </aside>