{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
  <div class="flex items-center justify-between mb-2">
    <h1 class="text-2xl font-bold text-slate-800">Branches</h1>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="space-y-4">
      <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider">Existing Branches</h2>
      {% if branches %}
      <div class="space-y-2">
        {% for b in branches %}
        <div class="airbnb-card p-4 flex items-center justify-between">
          <div class="flex items-center gap-3 min-w-0">
            {% if b.name == head %}
            <span class="w-2 h-2 rounded-full bg-emerald-500 shrink-0" title="Current branch"></span>
            {% else %}
            <span class="w-2 h-2 rounded-full bg-slate-300 shrink-0"></span>
            {% endif %}
            <div class="min-w-0">
              <span class="font-bold text-sm text-slate-800 font-mono">{{ b.name }}</span>
              {% if b.commit_id %}
              <span class="text-xs text-slate-400 ml-2 font-mono">{{ b.commit_id[:12] }}</span>
              {% endif %}
              {% if b.name == head %}
              <span class="ml-2 px-1.5 py-0.5 rounded text-[9px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">HEAD</span>
              {% endif %}
            </div>
          </div>
          <div class="flex items-center gap-2 shrink-0">
            {% if b.name != head %}
            <form action="/branches/switch" method="post" class="inline">
              <input type="hidden" name="name" value="{{ b.name }}">
              <button type="submit" class="px-3 py-1.5 text-xs font-bold text-white bg-slate-600 rounded-lg hover:bg-slate-700 transition-colors">Switch</button>
            </form>
            <form action="/branches/delete" method="post" class="inline" onsubmit="return confirm('Delete branch \'{{ b.name }}\'?')">
              <input type="hidden" name="name" value="{{ b.name }}">
              <button type="submit" class="px-3 py-1.5 text-xs font-bold text-rose-600 bg-rose-50 border border-rose-200 rounded-lg hover:bg-rose-100 transition-colors">Delete</button>
            </form>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="bg-white border border-[#dddddd] rounded-[14px] p-6 text-center text-slate-400 text-sm">
        No branches found.
      </div>
      {% endif %}
    </div>

    <div class="space-y-6">
      <div>
        <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-3">Create Branch</h2>
        <form action="/branches/create" method="post" class="airbnb-card p-4 space-y-3">
          <div>
            <label class="block text-xs font-semibold text-slate-600 mb-1">Branch Name</label>
            <input type="text" name="name" required placeholder="e.g. feature/new-ui" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm font-mono text-slate-700 focus:outline-none focus:border-[#ff385c]">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-600 mb-1">From Branch (optional)</label>
            <select name="from_branch" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:border-[#ff385c]">
              <option value="">-- current HEAD --</option>
              {% for b in branches %}
              <option value="{{ b.name }}" {% if b.name == head %}selected{% endif %}>{{ b.name }}</option>
              {% endfor %}
            </select>
          </div>
          <button type="submit" class="w-full px-4 py-2 bg-[#ff385c] text-white text-sm font-bold rounded-lg hover:bg-[#e00b41] transition-colors">Create Branch</button>
        </form>
      </div>

      <div>
        <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-3">Merge Branch</h2>
        <form action="/merge" method="post" class="airbnb-card p-4 space-y-3">
          <div>
            <label class="block text-xs font-semibold text-slate-600 mb-1">Source Branch (merge into <code class="font-mono text-[#ff385c]">{{ head }}</code>)</label>
            <select name="source_branch" required class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm text-slate-700 focus:outline-none focus:border-[#ff385c]">
              <option value="">-- select branch --</option>
              {% for b in branches %}
              {% if b.name != head %}
              <option value="{{ b.name }}">{{ b.name }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-600 mb-1">Merge Message</label>
            <input type="text" name="message" placeholder="Merge branch '...' into '...'" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm font-mono text-slate-700 focus:outline-none focus:border-[#ff385c]">
          </div>
          <button type="submit" class="w-full px-4 py-2 bg-amber-600 text-white text-sm font-bold rounded-lg hover:bg-amber-700 transition-colors">Merge</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const mergeForm = document.querySelector("form[action='/merge']");
  if (mergeForm) {
    const branchSelect = mergeForm.querySelector("select[name='source_branch']");
    const messageInput = mergeForm.querySelector("input[name='message']");
    if (branchSelect && messageInput) {
      branchSelect.addEventListener("change", function() {
        if (this.value && !messageInput.value) {
          messageInput.value = "Merge branch '" + this.value + "' into '{{ head }}'";
        }
      });
    }
  }
});
</script>
{% endblock %}