{{ define "extra_head" }}
<link rel="preload" fetchpriority="high" as="image" href="/static/img/external-link.svg" type="image/webp">
{{ end }}

{{ define "content" }}
<div class="vulnerability-page">
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell--span-12 vulnerability-title">
        <h1 class="title">
          {{ .Vulnerability.Id }}
        </h1>
        {{ if and .HumanSourceLink (hasPrefix .HumanSourceLink "https://github.com/advisories/") }}
          <a class="vulnerability-improvement-link" href="{{ .HumanSourceLink }}/improve" rel="nofollow">
            Suggest an improvement
          </a>
        {{ else if and .HumanSourceLink (not (hasPrefix .Vulnerability.Id "openSUSE-")) }}
          <div class="vulnerability-improvement-link">
          <a href="https://google.github.io/osv.dev/faq/#ive-found-something-wrong-with-the-data" target="_blank" rel="noopener noreferrer" title="Follow the Source link below and use its record feedback reporting mechanism">
            See a problem?
          </a>
          <br/>
          Please try reporting it <a href="{{ .HumanSourceLink }}" target="_blank" rel="nofollow noopener noreferrer">to the source</a> first.
        </div>
        {{ else }}
          <a class="vulnerability-improvement-link" href="https://google.github.io/osv.dev/faq/#ive-found-something-wrong-with-the-data" target="_blank" rel="noopener noreferrer">
            See a problem?
          </a>
        {{ end }}
      </div>
      <div class="mdc-layout-grid__cell--span-12">
        <dl class="vulnerability-details">
          {{ if and .HumanSourceLink (not (hasPrefix .Vulnerability.Id "openSUSE-")) }}
          <dt>Source</dt>
          <dd><a href="{{ .HumanSourceLink }}" target="_blank" rel="nofollow noopener noreferrer">{{ .HumanSourceLink }}</a></dd>
          {{ end }}
          {{ if .SourceLink }}
          <dt>Import Source</dt>
          <dd><a href="{{ .SourceLink }}" target="_blank" rel="nofollow noopener noreferrer">{{ .SourceLink }}</a></dd>
          {{ end }}

          <dt>JSON Data</dt>
          <dd><a href="https://{{ .APIURL }}/v1/vulns/{{ .Vulnerability.Id }}" target="_blank" rel="noopener noreferrer">
            https://{{ .APIURL }}/v1/vulns/{{ .Vulnerability.Id }}</a>
          </dd>
          {{ if .Vulnerability.Aliases }}
          <dt>Aliases</dt>
          <dd>
            <ul class="aliases">
              {{ range $alias := .Vulnerability.Aliases }}
              <li>
                {{ if $.IsKnownID $alias }}
                <a href="/vulnerability/{{ $alias }}">{{ $alias }}</a>
                {{ else }}
                {{ $alias }}
                {{ end }}
              </li>
              {{ end }}
            </ul>
          </dd>
          {{ end }}
          {{ if .UpstreamHierarchy }}
          <dt>Upstream</dt>
          <dd class="upstream">{{ .UpstreamHierarchy }}</dd>
          {{ end }}
          {{ if .DownstreamHierarchy }}
          <dt>Downstream</dt>
          <dd class="downstream">{{ .DownstreamHierarchy }}</dd>
          {{ end }}
          {{ if .RelatedHTML }}
          <dt>Related</dt>
          <dd class="related">{{ .RelatedHTML }}</dd>
          {{ end }}
          {{ if .FormattedWithdrawn }}
          <dt class="withdrawn">
            Withdrawn
            <a href="https://ossf.github.io/osv-schema/#withdrawn-field" target="_blank" rel="noopener noreferrer"></a>
          </dt>
          <dd class="withdrawn">{{ .FormattedWithdrawn }}</dd>
          {{ end }}
          <dt>Published</dt>
          <dd>{{ .FormattedPublished }}</dd>
          <dt>Modified</dt>
          <dd>{{ .FormattedModified }}</dd>
          {{ if .Severities }}
          <dt>Severity</dt>
          <dd>
            <ul class="severity">
              {{ range .Severities }}
              <li>
                {{ if .IsCVSS }}
                  <span class="severity-level severity-{{ .Level }}">{{ .Rating }}</span>
                  {{ .Type }} - {{ .Score }}
                  {{ if .Source }}(Source: {{ .Source }}){{ end }}
                  {{ if .CalculatorURL }}
                  <a href="{{ .CalculatorURL }}" target="_blank" rel="nofollow noopener noreferrer">
                    CVSS Calculator</a>
                  {{ end }}
                {{ else }}
                  <span class="severity-level severity-invalid">{{ .Type }} - {{ .Score }}</span>
                  {{ if .Source }}(Source: {{ .Source }}){{ end }}
                {{ end }}
              </li>
              {{ end }}
            </ul>
          </dd>
          {{ end }}
          <dt class="summary">Summary</dt>
          <dd class="summary {{ if not .Vulnerability.Summary }}muted{{ end }}">
            {{ if .Vulnerability.Summary }}
            {{ .Vulnerability.Summary }}
            {{ else }}
            [none]
            {{ end }}
          </dd>
          <dt>Details</dt>
          <dd class="details">
            {{ .DetailsHTML }}
          </dd>
          {{ if .DatabaseSpecificJSON }}
          <dt>
            Database specific
            <a href="https://ossf.github.io/osv-schema/#database_specific-field" target="_blank"
              rel="noopener noreferrer"></a>
          </dt>
          <dd><pre class="specific">{{ .DatabaseSpecificJSON }}</pre></dd>
          {{ end }}
          {{ if .Vulnerability.References }}
          <dt>References</dt>
          <dd>
            <ul class="links">
              {{ range .Vulnerability.References }}
              <li><a href="{{ .Url }}" target="_blank" rel="nofollow noopener noreferrer">{{ .Url }}</a></li>
              {{ end }}
            </ul>
          </dd>
          {{ end }}
          {{ if .Vulnerability.Credits }}
          <dt class="credits">Credits</dt>
          <dd class="credits">
            <ul>
              {{ range .Vulnerability.Credits }}
              <li class="credit">
                <ul>
                  <li>{{ .Name }}{{ if .Type }} - {{ .Type }}{{ end }}</li>
                  {{ if .Contact }}
                  <li>
                    <ul class="contact">
                      {{ range .Contact }}
                      <li><a href="{{ . }}" target="_blank" rel="nofollow noopener noreferrer">{{ . }}</a></li>
                      {{ end }}
                    </ul>
                  </li>
                  {{ end }}
                </ul>
              </li>
              {{ end }}
            </ul>
          </dd>
          {{ end }}
        </dl>
      </div>
    </div>
  </div>
  <div class="vulnerability-packages-container">
  <h2 class="title">Affected packages</h2>

  {{ if .ShouldCollapse }}
  <div class="vulnerability-packages force-collapse">
    {{ range $ecoGroup := .EcosystemGroups }}
      <details class="ecosystem-accordion">
        <summary class="package-header">
          <span class="vuln-ecosystem">{{ $ecoGroup.EcosystemName }}</span>
        </summary>
        <div class="ecosystem-content-panel{{ if $ecoGroup.IsLast }} ecosystem-content-panel--last{{ end }}">
          {{ range $ecoGroup.Packages }}
            <details class="package-accordion{{ if and $ecoGroup.IsLast .IsLastPackage }} package-accordion--last{{ end }}">
              <summary class="package-name-title">
                {{ .PackageName }}
              </summary>
            <div class="package-details-card">
              <div class="mdc-layout-grid">
                {{ if .HasPackage }}
                <div class="vulnerability-package-subsection mdc-layout-grid__inner">
                  <h3 class="mdc-layout-grid__cell--span-3">Package</h3>
                  <div class="mdc-layout-grid__cell--span-9">
                    <dl>
                      <dt>Name</dt>
                      {{ if .EcosystemLink }}
                      <dd><a href="{{ .EcosystemLink }}" target="_blank" rel="nofollow noopener noreferrer">{{ .PackageName }}</a></dd>
                      {{ else }}
                      <dd>{{ .PackageName }}</dd>
                      {{ end }}
                      {{ if .DepsDevURL }}
                      <dd><a href="{{ .DepsDevURL }}" target="_blank" rel="noopener noreferrer">View open source insights on deps.dev</a></dd>
                      {{ end }}
                      {{ if .PackagePurl }}
                      <dt>Purl</dt>
                      <dd class="purl">{{ .PackagePurl }}</dd>
                      {{ end }}
                    </dl>
                  </div>
                </div>
                {{ end }}
                {{ if .Severities }}
                <div class="vulnerability-package-subsection mdc-layout-grid__inner">
                  <h3 class="mdc-layout-grid__cell--span-3">Severity</h3>
                  <div class="mdc-layout-grid__cell--span-9">
                    <ul class="severity">
                      {{ range .Severities }}
                      <li>
                        {{ if .IsCVSS }}
                          <span class="severity-level severity-{{ .Level }}">{{ .Rating }}</span>
                          {{ .Type }} - {{ .Score }}
                          {{ if .Source }}(Source: {{ .Source }}){{ end }}
                          {{ if .CalculatorURL }}
                          <a href="{{ .CalculatorURL }}" target="_blank" rel="nofollow noopener noreferrer">
                            CVSS Calculator</a>
                          {{ end }}
                        {{ else }}
                          <span class="severity-level severity-invalid">{{ .Type }} - {{ .Score }}</span>
                          {{ if .Source }}(Source: {{ .Source }}){{ end }}
                        {{ end }}
                      </li>
                      {{ end }}
                    </ul>
                  </div>
                </div>
                {{ end }}
                <div class="vulnerability-package-subsection affected-ranges-subsection mdc-layout-grid__inner">
                  <h3 class="mdc-layout-grid__cell--span-3">Affected ranges <a href="https://ossf.github.io/osv-schema/#examples" target="_blank" rel="noopener noreferrer"></a></h3>
                  <div class="mdc-layout-grid__cell--span-9">
                  {{ range .Ranges }}
                    <dl>
                      <dt>Type</dt>
                      <dd>{{ .Type }}</dd>
                      {{ if .Repo }}
                      <dt>Repo</dt>
                      <dd>{{ .Repo }}</dd>
                      {{ end }}
                      <dt>Events</dt>
                      <dd>
                        <div class="mdc-layout-grid__inner events">
                          {{ range .Events }}
                            <div class="mdc-layout-grid__cell--span-3">{{ .Type }}</div>
                            <div class="mdc-layout-grid__cell--span-9 version-value">
                              {{ if .Link }}
                                <a href="{{ .Link }}" rel="nofollow">{{ .Value }}</a>
                              {{ else if .IsUnknown }}
                                <div class="tooltip">{{ .Value }}
                                  <span class="tooltiptext">{{ .TooltipText }}</span>
                                </div>
                              {{ else }}
                                {{ .Value }}
                              {{ end }}
                            </div>
                          {{ end }}
                        </div>
                      </dd>
                      {{ if .DatabaseSpecificJSON }}
                      <dt>Database specific <a href="https://ossf.github.io/osv-schema/#affectedrangesdatabase_specific-field" target="_blank" rel="noopener noreferrer"></a></dt>
                      <dd>
                        <details class="database-specific-section">
                          <summary class="database-specific-header">Show details</summary>
                          <div class="database-specific-content">
                            <pre class="specific">{{ .DatabaseSpecificJSON }}</pre>
                          </div>
                        </details>
                      </dd>
                      {{ end }}
                    </dl>
                  {{ end }}
                  </div>
                </div>
                {{ if .VersionGroups }}
                <div class="vulnerability-package-subsection mdc-layout-grid__inner">
                    <h3 class="mdc-layout-grid__cell--span-3">Affected versions <a href="https://ossf.github.io/osv-schema/#affectedversions-field" target="_blank" rel="noopener noreferrer"></a></h3>
                    <div class="mdc-layout-grid__cell--span-9 version-value">
                      {{ range .VersionGroups }}
                      <details class="versions-section">
                        <summary class="version-header">{{ .Header }}</summary>
                        <div class="versions {{ if not .IsLast }}versions-separator{{ end }}">
                          {{ range .Versions }}
                          <div class="version">{{ . }}</div>
                          {{ end }}
                        </div>
                      </details>
                      {{ end }}
                    </div>
                </div>
                {{ end }}
                {{ if .EcosystemSpecificJSON }}
                <div class="vulnerability-package-subsection mdc-layout-grid__inner">
                    <h3 class="mdc-layout-grid__cell--span-3">Ecosystem specific <a href="https://ossf.github.io/osv-schema/#affectedecosystem_specific-field" target="_blank" rel="noopener noreferrer"></a></h3>
                    <div class="mdc-layout-grid__cell--span-9"><pre class="specific">{{ .EcosystemSpecificJSON }}</pre></div>
                </div>
                {{ end }}
                {{ if .DatabaseSpecificJSON }}
                <div class="vulnerability-package-subsection mdc-layout-grid__inner">
                    <h3 class="mdc-layout-grid__cell--span-3">Database specific <a href="https://ossf.github.io/osv-schema/#affecteddatabase_specific-field" target="_blank" rel="noopener noreferrer"></a></h3>
                    <div class="mdc-layout-grid__cell--span-9">
                      {{ if .DatabaseSpecificKVs }}
                      <div class="database-specific-list">
                        {{ range .DatabaseSpecificKVs }}
                        <details class="database-specific-section">
                          <summary class="database-specific-header">{{ .Key }}</summary>
                          <div class="database-specific-content">
                            <pre class="specific">{{ .Value }}</pre>
                          </div>
                        </details>
                        {{ end }}
                      </div>
                      {{ else }}
                      <pre class="specific">{{ .DatabaseSpecificJSON }}</pre>
                      {{ end }}
                    </div>
                </div>
                {{ end }}
              </div>
            </div>
          </details>
        {{ end }}
        </div>
      </details>
    {{ end }}
  </div>

  {{ else }}
    <osv-tabs class="vulnerability-packages">
      {{ range .AffectedPackages }}
      <h2 class="package-header">
        <span class="vuln-ecosystem">{{ .EcosystemName }}</span>
        <span class="vuln-title-divider">/</span>
        <span class="vuln-name">{{ .PackageName }}</span>
      </h2>
      <div class="mdc-layout-grid">
        {{ if .HasPackage }}
        <div class="vulnerability-package-subsection mdc-layout-grid__inner">
          <h3 class="mdc-layout-grid__cell--span-3">
            Package
          </h3>
          <div class="mdc-layout-grid__cell--span-9">
            <dl>
              <dt>Name</dt>
              {{ if .EcosystemLink }}
              <dd><a href="{{ .EcosystemLink }}" target="_blank" rel="nofollow noopener noreferrer">{{ .PackageName }}</a></dd>
              {{ else }}
              <dd>{{ .PackageName }}</dd>
              {{ end }}
              {{ if .DepsDevURL }}
              <dd><a href="{{ .DepsDevURL }}" target="_blank" rel="noopener noreferrer">
                View open source insights on deps.dev</a></dd>
              {{ end }}
              {{ if .PackagePurl }}
              <dt>Purl</dt>
              <dd class="purl">{{ .PackagePurl }}</dd>
              {{ end }}
            </dl>
          </div>
        </div>
        {{ end }}
        {{ if .Severities }}
        <div class="vulnerability-package-subsection mdc-layout-grid__inner">
          <h3 class="mdc-layout-grid__cell--span-3">
            Severity
          </h3>
          <div class="mdc-layout-grid__cell--span-9">
            <ul class="severity">
              {{ range .Severities }}
              <li>
                {{ if .IsCVSS }}
                  <span class="severity-level severity-{{ .Level }}">{{ .Rating }}</span>
                  {{ .Type }} - {{ .Score }}
                  {{ if .Source }}(Source: {{ .Source }}){{ end }}
                  {{ if .CalculatorURL }}
                  <a href="{{ .CalculatorURL }}" target="_blank" rel="nofollow noopener noreferrer">
                    CVSS Calculator</a>
                  {{ end }}
                {{ else }}
                  <span class="severity-level severity-invalid">{{ .Type }} - {{ .Score }}</span>
                  {{ if .Source }}(Source: {{ .Source }}){{ end }}
                {{ end }}
              </li>
              {{ end }}
            </ul>
          </div>
        </div>
        {{ end }}
        <div class="vulnerability-package-subsection mdc-layout-grid__inner">
          <h3 class="mdc-layout-grid__cell--span-3">
            Affected ranges
            <a href="https://ossf.github.io/osv-schema/#examples" target="_blank" rel="noopener noreferrer"></a>
          </h3>
          <div class="mdc-layout-grid__cell--span-9">
          {{ range .Ranges }}
            <dl>
              <dt>Type</dt>
              <dd>{{ .Type }}</dd>

              {{ if .Repo }}
              <dt>Repo</dt>
              <dd>{{ .Repo }}</dd>
              {{ end }}

              <dt>Events</dt>
              <dd>
                <div class="mdc-layout-grid__inner events">
                  {{ range .Events }}
                    <div class="mdc-layout-grid__cell--span-3">
                      {{ .Type }}
                    </div>
                    <div class="mdc-layout-grid__cell--span-9 version-value">
                      {{ if .Link }}
                        <a href="{{ .Link }}" rel="nofollow">
                          {{ .Value }}
                        </a>
                      {{ else if .IsUnknown }}
                        <div class="tooltip">
                          {{ .Value }}
                          <span class="tooltiptext">{{ .TooltipText }}</span>
                        </div>
                      {{ else }}
                        {{ .Value }}
                      {{ end }}
                    </div>
                  {{ end }}
                </div>
              </dd>

              {{ if .DatabaseSpecificJSON }}
              <dt>
                Database specific
                <a href="https://ossf.github.io/osv-schema/#affectedrangesdatabase_specific-field" target="_blank"
                  rel="noopener noreferrer"></a>
              </dt>
              <dd>
                <details class="database-specific-section">
                  <summary class="database-specific-header">Show details</summary>
                  <div class="database-specific-content">
                    <pre class="specific">{{ .DatabaseSpecificJSON }}</pre>
                  </div>
                </details>
              </dd>
              {{ end }}
            </dl>
          {{ end }}
          </div>
        </div>
        {{ if .VersionGroups }}
        <div class="vulnerability-package-subsection mdc-layout-grid__inner">
          <h3 class="mdc-layout-grid__cell--span-3">
            Affected versions
            <a href="https://ossf.github.io/osv-schema/#affectedversions-field" target="_blank"
              rel="noopener noreferrer"></a>
          </h3>
          <div class="mdc-layout-grid__cell--span-9 version-value">
            {{ range .VersionGroups }}
            <details class="versions-section">
              <summary class="version-header">{{ .Header }}</summary>
              <div class="versions {{ if not .IsLast }}versions-separator{{ end }}">
                {{ range .Versions }}
                <div class="version">{{ . }}</div>
                {{ end }}
              </div>
            </details>
            {{ end }}
          </div>
        </div>
        {{ end }}
        {{ if .EcosystemSpecificJSON }}
        <div class="vulnerability-package-subsection mdc-layout-grid__inner">
          <h3 class="mdc-layout-grid__cell--span-3">
            Ecosystem specific
            <a href="https://ossf.github.io/osv-schema/#affectedecosystem_specific-field" target="_blank"
              rel="noopener noreferrer"></a>
          </h3>
          <div class="mdc-layout-grid__cell--span-9">
            <pre class="specific">{{ .EcosystemSpecificJSON }}</pre>
          </div>
        </div>
        {{ end }}
        {{ if .DatabaseSpecificJSON }}
        <div class="vulnerability-package-subsection mdc-layout-grid__inner">
          <h3 class="mdc-layout-grid__cell--span-3">
            Database specific
            <a href="https://ossf.github.io/osv-schema/#affecteddatabase_specific-field" target="_blank"
              rel="noopener noreferrer"></a>
          </h3>
          <div class="mdc-layout-grid__cell--span-9">
            {{ if .DatabaseSpecificKVs }}
            <div class="database-specific-list">
              {{ range .DatabaseSpecificKVs }}
              <details class="database-specific-section">
                <summary class="database-specific-header">{{ .Key }}</summary>
                <div class="database-specific-content">
                  <pre class="specific">{{ .Value }}</pre>
                </div>
              </details>
              {{ end }}
            </div>
            {{ else }}
            <pre class="specific">{{ .DatabaseSpecificJSON }}</pre>
            {{ end }}
          </div>
        </div>
        {{ end }}
      </div>
      {{ end }}
    </osv-tabs>
  {{ end }}
</div>
</div>
<turbo-stream action="update" target="title">
  <template>
    {{ .Vulnerability.Id }} - OSV
  </template>
</turbo-stream>

<script>
  document.addEventListener('turbo:load', function() {
    const ECOSYSTEM_EXPAND_THRESHOLD = 10;
    const PACKAGE_EXPAND_THRESHOLD = 7;
    const ECOSYSTEM_PACKAGE_COLLAPSE_THRESHOLD = 9;

  /**
   * Sets up the vertical, grouped layout for vulnerability packages.
   * - All ecosystem headers are expanded if their total count is below `ECOSYSTEM_EXPAND_THRESHOLD`,
   *   and if their total packages count is below `ECOSYSTEM_PACKAGE_COLLAPSE_THRESHOLD`.
   * - Within each ecosystem, all package headers are expanded if their count is below `PACKAGE_EXPAND_THRESHOLD`.
   */
    function setupVerticalLayout() {
      const ecosystemAccordions = document.querySelectorAll('.vulnerability-packages.force-collapse .ecosystem-accordion');
      if (!ecosystemAccordions.length) return;

      const shouldExpandEcosystems = ecosystemAccordions.length < ECOSYSTEM_EXPAND_THRESHOLD;

      ecosystemAccordions.forEach(accordion => {
        const panel = accordion.querySelector('.ecosystem-content-panel');
        const packageAccordions = panel ? panel.querySelectorAll('.package-accordion') : [];
        const hasManyPackages =
          ecosystemAccordions.length > 1 && packageAccordions.length > ECOSYSTEM_PACKAGE_COLLAPSE_THRESHOLD;

        const shouldExpandAccordion =
          shouldExpandEcosystems &&
          panel !== null &&
          !hasManyPackages;

        accordion.open = shouldExpandAccordion;

        const shouldExpandPackages = packageAccordions.length <= PACKAGE_EXPAND_THRESHOLD;
        packageAccordions.forEach(packageAccordion => {
          packageAccordion.open = shouldExpandPackages;
        });
      });
    }
    
    if (document.querySelector('.vulnerability-packages.force-collapse')) {
      setupVerticalLayout();
    }
  });
</script>
{{ end }}