{% extends "client/base.html" %}
{% block title %}Account settings — client portal{% endblock %}
{% block heading %}Account settings{% endblock %}

{% block content %}
<div class="pane" style="max-width:720px">
  <div class="panel">
    <div class="panel-h"><h2>Your details</h2></div>
    <div class="panel-b">
      <form method="post" novalidate>{% csrf_token %}
        <div class="two">
          <div class="field"><label for="first_name">First name</label>
            <input id="first_name" name="first_name" value="{{ client.user.first_name }}">
            {% with msg=errors.first_name %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="last_name">Last name</label>
            <input id="last_name" name="last_name" value="{{ client.user.last_name }}"></div>
        </div>
        <div class="two">
          <div class="field"><label for="email">Email</label>
            <input id="email" name="email" type="email" value="{{ client.user.email }}">
            {% with msg=errors.email %}{% include "partials/error.html" %}{% endwith %}</div>
          <div class="field"><label for="phone">Phone</label>
            <input id="phone" name="phone" value="{{ client.phone }}"></div>
        </div>
        <div class="field"><label for="company">Company</label>
          <input id="company" name="company" value="{{ client.company }}"></div>
        <div class="field"><label for="address">Address</label>
          <input id="address" name="address" value="{{ client.address }}"></div>
        <button class="btn btn-primary" name="save_profile" value="1">Save changes</button>
      </form>
    </div>
  </div>

  <div class="panel">
    <div class="panel-h"><h2>Password</h2></div>
    <div class="panel-b">
      <p class="muted" style="font-size:15px">Changing your password signs you out of other devices.</p>
      <a href="{% url 'password_change' %}" class="btn" style="margin-top:12px">Change password</a>
    </div>
  </div>

  <div class="panel">
    <div class="panel-h"><h2>Email notifications</h2></div>
    <div class="panel-b">
      <form method="post">{% csrf_token %}
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)">
          <input type="checkbox" name="notify_project_updates" style="width:auto" {% if client.notify_project_updates %}checked{% endif %}> <span>Project updates</span></label>
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)">
          <input type="checkbox" name="notify_invoices" style="width:auto" {% if client.notify_invoices %}checked{% endif %}> <span>New invoices</span></label>
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)">
          <input type="checkbox" name="notify_payments" style="width:auto" {% if client.notify_payments %}checked{% endif %}> <span>Payment receipts</span></label>
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)">
          <input type="checkbox" name="notify_messages" style="width:auto" {% if client.notify_messages %}checked{% endif %}> <span>Messages from Teniola</span></label>
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)">
          <input type="checkbox" name="notify_tickets" style="width:auto" {% if client.notify_tickets %}checked{% endif %}> <span>Support ticket replies</span></label>
        <label style="display:flex;align-items:center;gap:10px;padding:9px 0">
          <input type="checkbox" name="notify_renewals" style="width:auto" {% if client.notify_renewals %}checked{% endif %}> <span>Domain and hosting renewal reminders</span></label>
        <button class="btn btn-primary" name="save_prefs" value="1" style="margin-top:16px">Save preferences</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}