{% extends "base.html" %}
{% block announce %}
📣 We now recommend <a href="https://mini-swe-agent.com">mini-swe-agent</a> instead of SWE-agent: Same performance, much more simple &amp; flexible
{% endblock %}

{% block content %}
{{ super() }}

<!-- Maintenance mode popup -->
<div id="maintenance-popup-overlay" style="
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
">
  <div style="
    background: var(--md-default-bg-color, #fff);
    color: var(--md-default-fg-color, #333);
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    max-width: 800px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    text-align: center;
    font-family: var(--md-text-font-family);
  ">
    <div style="font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.8rem;">
      <p style="margin: 0 0 0.4rem;">SWE-agent has been superseded by <strong>mini-swe-agent</strong>.</p>
      <p style="margin: 0 0 0.4rem;">mini-swe-agent is simpler &amp; more flexible while still being as performant.</p>
      <p style="margin: 0;">See the <a href="https://mini-swe-agent.com/latest/faq/">FAQ</a> for more details about why you should switch.
      <br/>SWE-agent is now in maintenance-only mode.</p>
    </div>
    <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
      <a href="https://mini-swe-agent.com" style="
        display: inline-block;
        padding: 0.6rem 1.4rem;
        border-radius: 6px;
        background: #0099ff;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.88rem;
        transition: background 0.2s;
      " onmouseover="this.style.background='#007acc'" onmouseout="this.style.background='#0099ff'">
        Check out mini-swe-agent
      </a>
      <button onclick="dismissMaintenancePopup()" style="
        padding: 0.6rem 1.4rem;
        border-radius: 6px;
        background: transparent;
        border: 1px solid var(--md-default-fg-color--lighter, #ccc);
        color: var(--md-default-fg-color, #333);
        cursor: pointer;
        font-size: 0.88rem;
        transition: background 0.2s;
      " onmouseover="this.style.background='var(--md-code-bg-color, #eee)'" onmouseout="this.style.background='transparent'">
        Continue to SWE-agent
      </button>
    </div>
  </div>
</div>

<script>
function dismissMaintenancePopup() {
  document.getElementById('maintenance-popup-overlay').style.display = 'none';
  sessionStorage.setItem('maintenance-popup-dismissed', '1');
}

(function() {
  if (!sessionStorage.getItem('maintenance-popup-dismissed')) {
    var overlay = document.getElementById('maintenance-popup-overlay');
    overlay.style.display = 'flex';
    overlay.addEventListener('click', function(e) {
      if (e.target === overlay) dismissMaintenancePopup();
    });
  }
})();
</script>

<!-- Floating Bubbles -->
<div class="floating-bubbles">
<div class="floating-bubbles-title">Our projects</div>
  <a href="https://mini-swe-agent.com/" class="bubble" title="Mini-SWE-Agent">
    <img src="{{ 'assets/mini_logo.svg' | url }}" alt="Mini-SWE-Agent">
    <span class="bubble-tooltip">Mini-SWE-Agent</span>
  </a>
  <a href="https://swe-rex.com/" class="bubble" title="SWE-rex">
    <img src="{{ 'assets/swerex_logo.svg' | url }}" alt="SWE-rex">
    <span class="bubble-tooltip">SWE-ReX</span>
  </a>
  <a href="https://swesmith.com" class="bubble" title="SWE-smith">
    <img src="{{ 'assets/swesmith_logo.png' | url }}" alt="SWE-smith">
    <span class="bubble-tooltip">SWE-smith</span>
  </a>
  <a href="https://swebench.com" class="bubble" title="SWE-bench">
    <img src="{{ 'assets/swebench_logo.png' | url }}" alt="SWE-bench">
    <span class="bubble-tooltip">SWE-bench</span>
  </a>
  <a href="https://www.swebench.com/sb-cli/" class="bubble" title="sb-cli">
    <img src="{{ 'assets/sbcli_logo.svg' | url }}" alt="sb-cli">
    <span class="bubble-tooltip">sb-cli</span>
  </a>
</div>
{% endblock %}