{% extends "admin/layout.html" %}
{% let active_page = "clients" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ title }}</h1>
</div>

<div class="form-card">
    <form method="post" action="{{ action_url }}">
        <div class="field">
            <label class="label">{{ t.clients_name }}</label>
            <div class="control">
                <input class="input" type="text" name="name" value="{{ client_name }}" required>
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.clients_phone }}</label>
            <div class="control">
                <input class="input" type="tel" name="phone" value="{{ client_phone }}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.clients_email }}</label>
            <div class="control">
                <input class="input" type="email" name="email" value="{{ client_email }}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.clients_address }}</label>
            <div class="control">
                <input class="input" type="text" name="address" value="{{ client_address }}">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.clients_notes }}</label>
            <div class="control">
                <textarea class="textarea" name="notes" rows="3">{{ client_notes }}</textarea>
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.clients_color }}</label>
            <div class="control" style="display:flex;align-items:center;gap:0.5rem;">
                <input type="color" name="color" value="{{ client_color }}" style="width:3rem;height:2.2rem;padding:0;border:1px solid #ddd;border-radius:6px;cursor:pointer;">
                <span class="has-text-grey is-size-7">{{ client_color }}</span>
            </div>
        </div>
        <div class="field">
            <button type="submit" class="button is-primary is-fullwidth">{{ submit_label }}</button>
        </div>
    </form>
    {% if is_edit %}
    <hr>
    <div class="field">
        <label class="label">{{ t.portal_link }}</label>
        <div class="control" style="display:flex;align-items:center;gap:0.5rem;">
            <input class="input is-small" type="text" readonly id="portalUrl" value="" style="flex:1;">
            <button type="button" class="button is-small is-info is-outlined" onclick="navigator.clipboard.writeText(document.getElementById('portalUrl').value)">📋</button>
        </div>
        <div style="margin-top:0.75rem;text-align:center;">
            <canvas id="qrCanvas" style="max-width:180px;"></canvas>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
    <script>
        (function() {
            var url = window.location.origin + '/client/{{ client_token }}';
            document.getElementById('portalUrl').value = url;
            new QRious({ element: document.getElementById('qrCanvas'), value: url, size: 180, level: 'M' });
        })();
    </script>
    <hr>
    {% if client_status == "active" %}
        <form method="post" action="/admin/clients/{{ client_id }}/archive">
            <button type="submit" class="button is-warning is-outlined is-fullwidth">{{ t.action_archive }}</button>
        </form>
    {% else %}
        <form method="post" action="/admin/clients/{{ client_id }}/activate">
            <button type="submit" class="button is-success is-outlined is-fullwidth">{{ t.action_activate }}</button>
        </form>
    {% endif %}
    {% endif %}
</div>
{% endblock %}