<%#
  Copyright (C) 2020-2024  The Software Heritage developers
  See the AUTHORS file at the top-level directory of this distribution
  License: GNU Affero General Public License version 3, or any later version
  See top-level LICENSE file for more information
%>
<div id="diff_<%= diffData.id %>" class="card swh-file-diff-panel">
  <div class="card-header swh-background-gray border-bottom-0">
    <a data-bs-toggle="collapse" href="#diff_<%= diffData.id %>_content">
      <div class="float-start swh-title-color">
        <strong><%= diffPanelTitle %></strong>
      </div>
    </a>
    <div class="ms-auto float-end">
      <div class="btn-group diff-styles"
           role="group" style="visibility: hidden;">
        <input type="radio"
               class="btn-check"
               name="diffs-switch-<%= diffData.id %>"
               id="unified-<%= diffData.id %>"
               autocomplete="off" checked>
        <label class="btn btn-secondary btn-sm unified-diff-button"
               id="unified-<%= diffData.id %>-label"
               for="unified-<%= diffData.id %>"
               onclick="swh.revision.showUnifiedDiff('<%= diffData.id %>')">
          Unified
        </label>
        <input type="radio"
               class="btn-check"
               name="diffs-switch-<%= diffData.id %>"
               id="side-by-side-<%= diffData.id %>"
               autocomplete="off">
        <label class="btn btn-secondary btn-sm split-diff-button"
               for="side-by-side-<%= diffData.id %>"
               id="side-by-side-<%= diffData.id %>-label"
               onclick="swh.revision.showSplitDiff('<%= diffData.id %>')">
          Side-by-side
        </label>
      </div>
      <a href="<%= diffData.content_url %>" class="btn btn-secondary btn-sm"
         role="button">View file</a>
    </div>
    <div class="clearfix"></div>
  </div>
  <div id="diff_<%= diffData.id %>_content" class="collapse show">
    <div class="swh-diff-loading text-center" id="<%= diffData.id %>-loading"
         style="visibility: hidden;">
      <img src=<%= swhSpinnerSrc %>>
      <p>Loading diff ...</p>
    </div>
    <div class="highlightjs swh-content" style="display: none;"
         id="<%= diffData.id %>-highlightjs">
      <div id="<%= diffData.id %>-unified-diff">
        <pre><code class="<%= diffData.id %>" id="<%= diffData.id %>"></code></pre>
      </div>
      <div style="width: 100%; display: none;" id="<%= diffData.id %>-split-diff">
        <pre class="float-start" style="width: 50%;"><code class="<%= diffData.id %>" id="<%= diffData.id %>-from"></code></pre>
        <pre style="width: 50%;"><code class="<%= diffData.id %>" id="<%= diffData.id %>-to"></code></pre>
      </div>
    </div>
  </div>
</div>