{% extends "base.html" %}
{% block title %}Chat with {{ placement.nanny_name if role == 'parent' else placement.parent_name }}{% endblock %}
{% block content %}
<section class="hero">
  <div class="hero-copy">
    <p class="eyebrow">ACTIVE PLACEMENT</p>
    <h1>Chat with {{ placement.nanny_name if role == 'parent' else placement.parent_name }}</h1>
    <p>Placement dates: {{ placement.start_date }} to {{ placement.end_date }}</p>
  </div>
</section>

<section class="card chat-panel" data-chat data-placement-id="{{ placement.id }}"
         data-role="{{ role }}"
         data-ice-servers='{{ config["WEBRTC_ICE_SERVERS"]|tojson }}'>
  <div class="chat-toolbar">
    <div>
      <h2>Messages and calls</h2>
      <p class="muted" data-connection-status role="status">Connecting…</p>
    </div>
    <div class="actions-inline">
      <button class="btn small" type="button" data-start-call="audio">Voice call</button>
      <button class="btn small" type="button" data-start-call="video">Video call</button>
      <button class="btn small danger" type="button" data-end-call hidden>End call</button>
    </div>
  </div>

  <p class="alert" data-chat-notice role="status" hidden></p>
  <div class="incoming-call" data-incoming-call hidden>
    <p data-incoming-label></p>
    <button class="btn small" type="button" data-accept-call>Accept call</button>
    <button class="btn small subtle" type="button" data-decline-call>Decline</button>
  </div>

  <div class="call-media" data-call-media hidden>
    <video data-remote-video autoplay playsinline hidden></video>
    <video data-local-video autoplay muted playsinline hidden></video>
    <audio data-remote-audio autoplay></audio>
  </div>

  <p class="muted call-note">Calls need microphone access; video calls also need camera access. Google STUN is used by default and can see your public network IP address. A configured TURN provider can see participant IP addresses and relay encrypted call traffic. Review that provider's privacy terms. Calls may not connect on restrictive networks without a TURN relay.</p>
  <p class="muted">Messages are stored in the application database and currently have no automatic expiry. Both placement participants can review them, and authorized service operators may have database access. Do not send passwords, access codes, or other highly sensitive information.</p>

  <ol class="chat-messages" data-message-list aria-label="Chat messages" aria-live="polite">
    {% for message in messages %}
    <li class="chat-message {% if message.sender_role == role %}is-own{% endif %}"
        data-message-id="{{ message.id }}">
      <div class="chat-message-meta">
        <strong>{{ placement.parent_name if message.sender_role == 'parent' else placement.nanny_name }}</strong>
        <time>{{ message.created_at }} UTC</time>
      </div>
      <p>{{ message.body }}</p>
    </li>
    {% endfor %}
  </ol>

  <form class="chat-compose" data-chat-form method="post"
        action="{{ url_for('placement_chat', agreement_id=placement.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label class="sr-only" for="chat-message">Your message</label>
    <textarea id="chat-message" name="body" rows="2" maxlength="2000"
              placeholder="Write a message…" required></textarea>
    <button class="btn" type="submit">Send</button>
  </form>
</section>
<script src="{{ url_for('static', filename='socket.io.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='chat.js') }}" defer></script>
{% endblock %}