{{ if .skill.popup }}

  {{ $skillID := replace (lower .skill.name) " " "-"  }}
  {{ if .skill.id }}
    {{ $skillID = .skill.id }}
  {{ end }}

  {{ $logoImage := "" }}
  {{ if .skill.logo }}
    {{ $logoImage = resources.Get .skill.logo }}
    {{/*  svg don't support "Fit" operation   */}}
    {{ if ne $logoImage.MediaType.SubType "svg" }}
      {{ $logoImage = $logoImage.Fit "24x24" }}
    {{ end }}
  {{ end }}
  <div class="modal skill-modal" id="skill-{{ $skillID }}-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            {{ if $logoImage }}
              <img class="card-img-xs mr-2" src="{{ $logoImage.RelPermalink }}" alt="{{ .skill.name }}" />
            {{ end }}
            {{ .skill.name }}
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="{{ i18n "close" }}">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
            {{ with .skill.popup.summary }}
              <div class="row">
                <div class="col-12">
                  <p class="skill-popup-summary text-muted">
                    {{ . | markdownify }}
                  </p>
                </div>
              </div>
            {{ end }}
            {{ if .skill.popup.breakdown }}
              <div class="row">
                <div class="col-12">
                  {{ partial "partials/misc/skills-breakdown.html" (dict "breakdown" .skill.popup.breakdown "parentId" $skillID "level" 0) }}
                </div>
              </div>
            {{ end }}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n "close" }}</button>
        </div>
      </div>
    </div>
  </div>
{{ end }}