<div class="wrapper">
  <app-pdf-header></app-pdf-header>
  <div class="main">
    <div class="section section-transparent">
      <div class="container">
        <div class="owner">
          <div class="avatar">
            <img
              src="/assets/img/avatar/profilbild.jpg"
              alt="Circle Image"
              class="img-circle img-responsive"
            />
          </div>
          <div class="name">
            <h4 class="title">Christian Ziermann</h4>
            <h6 class="description">Web Developer</h6>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="personal">
              <h4 class="title">Personal</h4>
              <div class="description">
                <table class="">
                  <tr *ngFor="let personalColumn of displayedPersonalColumns">
                    <th>{{ personalColumn | uppercase }}</th>
                    <td>
                      {{
                        personalColumn == "birthdate"
                          ? (personalData[personalColumn]
                            | date: "dd. MMMM yyyy")
                          : personalData[personalColumn]
                      }}
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="personal">
              <h4 class="title">Jobs</h4>
              <table class="description">
                <tr>
                  <td class="job-date">
                    July 2018 - Today
                  </td>
                  <td class="job-company">
                    PlusServer
                  </td>
                  <td class="job-postion description">
                    Web-Developer
                  </td>
                </tr>
                <tr>
                  <td class="job-date">
                    August 2015 - July 2018
                  </td>
                  <td class="job-company">
                    PlusServer
                  </td>
                  <td class="job-postion description">
                    Trainee application development
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="col-md-12">
            <div class="personal">
              <h4 class="title">Education</h4>
              <table class="description ta">
                <tr>
                  <th>Date</th>
                  <th>School</th>
                  <th>Graduation</th>
                </tr>
                <tr></tr>
                <tr class="job-date">
                  <td>
                    August 2015 - July 2018
                  </td>
                  <td>
                    Georg-Simon-Ohm-Berufskolleg Köln
                  </td>
                  <td>
                    IT specialist application development
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-transparent">
      <div class="container">
        <div class="row">
          <h1 class="text-center col-md-12">
            Experience & Interests
          </h1>

          <div class="col-md-12">
            <div class="row">
              <div
                *ngFor="let skill of skills"
                class="text-center skill col-sm-3"
              >
                <div class="text-center skill-logo">
                  <div [innerHTML]="skill.iconHtml"></div>
                </div>
                <div class="text-center">
                  {{ skill.name }}
                </div>
                <div class="text-center">
                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-transparent">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="row">
              <h2 class="col-sm-12 title text-center">
                Soft Skills
              </h2>
            </div>

            <div class="row">
              <div
                *ngFor="let skill of softSkills"
                class="text-center skill col-sm-6"
              >
                <div class="text-center skill-logo">
                  <div [innerHTML]="skill.iconHtml"></div>
                </div>
                <div class="text-center">
                  {{ skill.name }}
                </div>
                <div class="text-center">
                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="row">
              <h2 class="col-sm-12 title text-center">
                Languages
              </h2>
            </div>

            <div class="row">
              <div
                *ngFor="let skill of languages"
                class="text-center skill col-sm-6"
              >
                <div class="text-center skill-logo">
                  <div [innerHTML]="skill.iconHtml"></div>
                </div>
                <div class="text-center">
                  {{ skill.name }}
                </div>
                <div class="text-center">
                  <i class="{{ getStarClass(skill.starCount, 0) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 1) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 2) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 3) }}"></i>
                  <i class="{{ getStarClass(skill.starCount, 4) }}"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="row">
              <div class="col-sm-12">
                <div class="row">
                  <h2 class="col-sm-12 title text-center">
                    Like to Learn
                  </h2>
                </div>

                <div class="row">
                  <div
                    *ngFor="let skill of likeToLearn"
                    class="text-center skill col-sm-6"
                  >
                    <div class="text-center skill-logo">
                      <div [innerHTML]="skill.iconHtml"></div>
                    </div>
                    <div class="text-center">
                      {{ skill.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section-transparent">
      <div class="container">
        <div class="row">
          <div class="col-md-8 mr-auto ml-auto">
            <h1 class="text-center">Hobbys</h1>
          </div>
        </div>
        <div class="row">
          <div *ngFor="let skill of hobbys" class="text-center skill col-sm-6">
            <div class="text-center skill-logo">
              <div [innerHTML]="skill.iconHtml"></div>
            </div>
            <div class="text-center">
              {{ skill.name }}
            </div>
            <div *ngIf="skill.description" class="text-center description">
              <div class="text-center">
                {{ skill.description.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section-transparent">
      <div class="container">
        <div class="row">
          <div class="col-md-8 mr-auto ml-auto text-center">
            <h1 class="">Keep in touch?</h1>
            <div>Mail: cziermann@mailbox.org</div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section-transparent"></div>
  </div>
</div>
