{% extends "base.html" %} {% block title %}Profiles · OpenBrowse{% endblock
%} {% block head %}
<style>
  .create-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  .create-card .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .create-card label {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .create-card input {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #e5e5e5;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 9px;
  }
  .cell-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #e5e5e5;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 9px;
    transition: border-color 0.12s ease, background 0.12s ease;
  }
  tbody tr:hover .cell-input {
    border-color: #2a2a2a;
    background: #0a0a0a;
  }
  .cell-input:hover {
    border-color: #333;
  }
  .cell-input:focus,
  .create-card input:focus {
    outline: none;
    border-color: #60a5fa;
    background: #0a0a0a;
  }
  .cell-input.mono {
    font-family: "SF Mono", "Menlo", monospace;
    width: 100%;
    min-width: 260px;
  }
  .btn {
    border: 1px solid #333;
    background: #1a1a1a;
    color: #e5e5e5;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
  }
  .btn {
    transition: border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
  }
  .btn:hover {
    border-color: #444;
  }
  .btn-primary {
    background: #60a5fa;
    color: #0a0a0a;
    border-color: #60a5fa;
    font-weight: 600;
  }
  .btn-primary:hover {
    background: #7db8fb;
  }
  .btn-danger:hover {
    border-color: #ef4444;
    color: #ef4444;
  }
  .actions {
    display: flex;
    gap: 8px;
  }
  .actions .btn-edit {
    opacity: 0;
    pointer-events: none;
  }
  tbody tr:hover .actions .btn-edit,
  tbody tr:focus-within .actions .btn-edit {
    opacity: 1;
    pointer-events: auto;
  }
  .edit-actions {
    display: none;
    gap: 8px;
  }
  tr.editing .edit-actions {
    display: flex;
  }
  tr.editing .btn-edit {
    display: none;
  }
  tr.editing .cell-input {
    border-color: #333;
    background: #0a0a0a;
  }
  .cell-input[readonly] {
    cursor: default;
  }
  .btn-save:hover {
    border-color: #60a5fa;
    color: #60a5fa;
  }
  .btn-cancel {
    padding: 7px 10px;
  }
  tbody tr {
    transition: background 0.12s ease;
  }
  tbody tr:hover {
    background: #0d0d0d;
  }
  table td {
    vertical-align: middle;
  }
  .hint {
    color: #666;
    font-size: 11px;
    margin-bottom: 16px;
  }
  .domains {
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
    cursor: default;
  }
  .domains .muted {
    color: #555;
  }
  .np-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .np-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s ease;
    text-decoration: none;
  }
  .np-tile:hover {
    border-color: #60a5fa;
    text-decoration: none;
  }
  .np-name {
    color: #e5e5e5;
    font-size: 13px;
    font-weight: 600;
  }
  .np-sub {
    color: #737373;
    font-size: 12px;
  }
  .np-form {
    display: none;
    gap: 10px;
    align-items: center;
  }
  .np-form.open {
    display: flex;
  }
</style>
{% endblock %} {% block content %}
<h1>Profiles <span class="badge">{{ total }}</span></h1>

<div class="create-card" style="flex-direction: column; align-items: stretch; gap: 10px">
  <span style="color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em">New profile</span>
  <div class="np-tiles">
    <button type="button" class="np-tile" id="np-create-tile">
      <span class="np-name">Create new profile</span>
      <span class="np-sub">Start with an empty cookie jar and log in during a session</span>
    </button>
    <a class="np-tile" href="/profiles/import">
      <span class="np-name">Import from BU Cloud</span>
      <span class="np-sub">Bring an existing profile's cookies and localStorage</span>
    </a>
  </div>
  <form id="np-create-form" class="np-form" method="post" action="/profiles/create">
    <input name="name" placeholder="Profile name (optional)" autocomplete="off" style="flex: 1" />
    <button class="btn btn-primary" type="submit">Create</button>
    <button class="btn" type="button" id="np-create-cancel">✕</button>
  </form>
</div>

<p class="hint">
  Editing an ID rewrites the profile's stored cookie file and repoints every
  session that used it. A blank Name clears it.
</p>

{% for p in profiles %}
<form id="edit-{{ p.id }}" method="post" action="/profiles/{{ p.id }}/edit"></form>
<form id="del-{{ p.id }}" method="post" action="/profiles/{{ p.id }}/delete"></form>
{% endfor %}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Cookie Domains</th>
      <th>Last Used</th>
      <th>Created</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for p in profiles %}
    <tr>
      <td>
        <input
          class="cell-input mono"
          form="edit-{{ p.id }}"
          name="new_id"
          value="{{ p.id }}"
          readonly
        />
      </td>
      <td>
        <input
          class="cell-input"
          form="edit-{{ p.id }}"
          name="name"
          value="{{ p.name or '' }}"
          readonly
        />
      </td>
      <td class="domains" title="{{ p.cookie_domains | join(', ') }}">
        {% if p.cookie_domains %}{{ p.cookie_domains | length }} domain{{ 's' if p.cookie_domains | length != 1 else '' }}{% else %}<span class="muted">empty</span>{% endif %}
      </td>
      <td>{{ format_relative(p.last_used_at) if p.last_used_at else '—' }}</td>
      <td>{{ format_relative(p.created_at) }}</td>
      <td>
        <div class="actions">
          <button class="btn btn-edit" type="button" onclick="enterEdit(this)">Edit</button>
          <span class="edit-actions">
            <button class="btn btn-save" form="edit-{{ p.id }}" type="submit">Save</button>
            <button
              class="btn btn-danger"
              form="del-{{ p.id }}"
              type="submit"
              onclick="return confirm('Delete this profile? Sessions that used it will keep their history but lose the profile link.');"
            >
              Delete
            </button>
            <button class="btn btn-cancel" type="button" onclick="cancelEdit(this)" title="Cancel">✕</button>
          </span>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<script>
  function enterEdit(btn) {
    var tr = btn.closest("tr");
    tr.classList.add("editing");
    tr.querySelectorAll(".cell-input").forEach(function (i) {
      i.removeAttribute("readonly");
    });
    tr.querySelector(".cell-input").focus();
  }
  function cancelEdit(btn) {
    var tr = btn.closest("tr");
    tr.classList.remove("editing");
    tr.querySelectorAll(".cell-input").forEach(function (i) {
      i.value = i.defaultValue;
      i.setAttribute("readonly", "");
    });
  }
  (function () {
    var tile = document.getElementById("np-create-tile");
    var form = document.getElementById("np-create-form");
    var cancel = document.getElementById("np-create-cancel");
    tile.addEventListener("click", function () {
      form.classList.add("open");
      form.querySelector("input").focus();
    });
    cancel.addEventListener("click", function () {
      form.classList.remove("open");
    });
  })();
</script>
{% endblock %}