<%#
  Copyright (C) 2020  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 bg-gray-light border-bottom-0">
    <a data-toggle="collapse" href="#diff_<%= diffData.id %>_content">
      <div class="float-left swh-title-color">
        <strong><%= diffPanelTitle %></strong>
      </div>
    </a>
    <div class="ml-auto float-right">
      <div class="btn-group btn-group-toggle diff-styles"
           data-toggle="buttons" style="visibility: hidden;">
        <label class="btn btn-default btn-sm form-check-label active unified-diff-button"
               onclick="swh.revision.showUnifiedDiff('<%= diffData.id %>')">
          <input type="radio" name="diffs-switch" id="unified"
                 autocomplete="off" checked> Unified
        </label>
        <label class="btn btn-default btn-sm form-check-label split-diff-button"
               onclick="swh.revision.showSplitDiff('<%= diffData.id %>')">
          <input type="radio" name="diffs-switch" id="side-by-side"
                 autocomplete="off"> Side-by-side
        </label>
      </div>
      <a href="<%= diffData.content_url %>" class="btn btn-default 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-left" 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>