{% extends "base.html" %}
{% block title %}{{ t('Code Editor') }}{% endblock %}
{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<style>
  .code-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
  .code-tree { max-height: 75vh; overflow: auto; font-size: 13px; padding: 8px !important; }
  .code-tree details { margin: 2px 0; }
  .code-tree summary { cursor: pointer; font-weight: 600; padding: 3px 4px; color: var(--muted); }
  .code-tree a { display: block; padding: 2px 8px 2px 18px; border-radius: 6px; color: var(--text); text-decoration: none;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: left; }
  .code-tree a:hover { background: var(--surface-2); }
  .code-tree a.on { background: var(--accent); color: #fff; }
  .code-edit textarea { width: 100%; min-height: 70vh; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; direction: ltr; }
  .CodeMirror { height: 70vh; border: 1px solid var(--border); border-radius: 8px; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; }
  .code-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
  .code-bar input[name=note] { flex: 1; min-width: 200px; }
  @media (max-width: 860px) { .code-wrap { grid-template-columns: 1fr; } .code-tree { max-height: 30vh; } }
</style>
<div class="page-head"><div><h1>{{ t('Code Editor') }}</h1>
  <small>{{ t('Fix the application from here. Every save is checked first and the previous version is kept, so any change can be undone.') }}</small></div>
  <div class="actions">
    <form method="get" action="{{ url_for('code.search') }}" class="inline"><input name="q" placeholder="{{ t('Find in all files') }}" style="width:200px"></form>
    <a class="btn ghost" href="{{ url_for('code.history') }}">{{ t('History') }}</a>
    <form method="post" action="{{ url_for('code.check_all') }}" class="inline"><button class="btn ghost">{{ t('Check everything') }}</button></form>
    <form method="post" action="{{ url_for('code.restart') }}" class="inline" onsubmit="return confirm('{{ t('Check the code and restart the application? Users are disconnected for a few seconds.') }}')">
      <button class="btn">{{ t('Apply & restart') }}</button></form>
  </div></div>
{% if pending %}<div class="flash info">{{ t('Python files changed since the last restart — press “Apply & restart” to make them live') }}:
  {% for p in pending %}<code>{{ p.path }}</code>{{ ', ' if not loop.last }}{% endfor %}</div>{% endif %}
<div class="code-wrap">
  <div class="card code-tree">
    {% for folder, items in tree|dictsort %}
    <details {{ 'open' if path and (path.rsplit('/', 1)[0] if '/' in path else '') == folder }}>
      <summary>{{ folder or t('(top level)') }}</summary>
      {% for f in items %}<a href="{{ url_for('code.index', path=f) }}" class="{{ 'on' if f == path }}" title="{{ f }}">{{ f.rsplit('/', 1)[-1] }}</a>{% endfor %}
    </details>{% endfor %}
  </div>
  <div class="code-edit">
    {% if content is not none %}
    <form method="post" action="{{ url_for('code.save') }}" id="code-form">
      <input type="hidden" name="path" value="{{ path }}">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
        <code style="direction:ltr">{{ path }}</code>
        <small class="muted">{{ t('Ctrl/Cmd + S to save') }}</small></div>
      {% if error %}<div class="flash error">{{ error }}</div>{% endif %}
      <textarea name="content" id="code-area" spellcheck="false">{{ content }}</textarea>
      <div class="code-bar">
        <input name="note" placeholder="{{ t('What did you change? (optional)') }}">
        <button class="btn">{{ t('Save') }}</button>
        <a class="btn ghost" href="{{ url_for('code.index', path=path) }}">{{ t('Discard changes') }}</a>
      </div>
    </form>
    {% else %}
    <div class="card"><h3 style="margin-top:0">{{ t('Choose a file on the left') }}</h3>
      <ul style="margin:0;padding-inline-start:20px;line-height:1.8">
        <li>{{ t('Screens are in lubwise/templates (changes are live as soon as you save).') }}</li>
        <li>{{ t('Logic is in lubwise/*.py and lubwise/views/*.py (changes go live after “Apply & restart”).') }}</li>
        <li>{{ t('Arabic wording is in lubwise/i18n.py.') }}</li>
        <li>{{ t('A file with an error is never saved. A restart only happens after the whole application loads in a test run.') }}</li>
        <li>{{ t('If the site ever fails to start, run on the server') }}: <code>python manage.py code-undo</code></li>
      </ul></div>
    {% if recent %}<div class="card flush"><table><thead><tr><th>{{ t('Recent changes') }}</th><th>{{ t('By') }}</th><th>{{ t('When') }}</th></tr></thead><tbody>
      {% for r in recent %}<tr><td><a href="{{ url_for('code.change', cid=r.id) }}"><code>{{ r.path }}</code></a> {% if r.note %}<small class="muted">— {{ r.note }}</small>{% endif %}</td>
        <td>{{ r.username or '' }}</td><td class="num">{{ r.at.replace('T', ' ') }}</td></tr>{% endfor %}</tbody></table></div>{% endif %}
    {% endif %}
  </div>
</div>
{% endblock %}
{% block scripts %}
{% if content is not none %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/jinja2/jinja2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/search/searchcursor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/search/search.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/dialog/dialog.min.js"></script>
<script>
(function () {
  var form = document.getElementById('code-form'), area = document.getElementById('code-area');
  var path = {{ path|tojson }}, dirty = false, ed = null;
  var mode = path.endsWith('.py') ? 'python' : path.endsWith('.html') ? 'htmlmixed' : path.endsWith('.js') || path.endsWith('.json') ? 'javascript'
           : path.endsWith('.css') ? 'css' : path.endsWith('.md') ? 'markdown' : null;
  if (window.CodeMirror) {
    ed = CodeMirror.fromTextArea(area, { lineNumbers: true, mode: mode, indentUnit: 4, tabSize: 4, indentWithTabs: false,
      matchBrackets: true, lineWrapping: false, extraKeys: { Tab: function (cm) { cm.replaceSelection('    '); } } });
    ed.on('change', function () { dirty = true; });
    {% if error %}var m = {{ error|tojson }}.match(/(\d+)/); if (m) { ed.setCursor(parseInt(m[1], 10) - 1, 0); ed.addLineClass(parseInt(m[1], 10) - 1, 'background', 'cm-error-line'); }{% endif %}
  } else { area.addEventListener('input', function () { dirty = true; }); }
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); if (ed) ed.save(); dirty = false; form.submit(); }
  });
  form.addEventListener('submit', function () { if (ed) ed.save(); dirty = false; });
  window.addEventListener('beforeunload', function (e) { if (dirty) { e.preventDefault(); e.returnValue = ''; } });
})();
</script>
<style>.cm-error-line { background: rgba(220, 38, 38, .18); }</style>
{% endif %}
{% endblock %}