{% extends "base.html" %}

{% block title %}Integrations · {{ assistant }}{% endblock %}

{% block main_class %}form{% endblock %}

{# A connected account under its service: works, or what does not and how to fix it. #}
{% macro account_row(connection, provider_id, choices_label=None) %}
  {% set problems = connection.capabilities | rejectattr("ok") | list if connection.capabilities else [] %}
  <div class="account">
    <div style="min-width: 0">
      <strong class="trunc" style="display: block; font-weight: 500">{{ connection.account }}</strong>
      <div class="mono muted" style="font-size: 11.5px">{% if connection.checked_at %}Tested {{ connection.checked_at | localtime }}{% else %}Not tested yet{% endif %}</div>
    </div>
    <div class="actions">
      {% if not connection.capabilities %}<span class="badge badge-neutral">○ Not tested</span>
      {% elif problems %}<span class="badge badge-fail">✕ {{ problems | length }} {{ "problem" if problems | length == 1 else "problems" }}</span>
      {% else %}<span class="badge badge-ok" title="{{ connection.capabilities | map(attribute='label') | join(', ') }}">✓ Connected</span>{% endif %}
      {% if choices_label %}<a class="btn" href="/integrations/{{ provider_id }}/{{ connection.id }}/choices">{{ choices_label }}</a>{% endif %}
      <form method="post" action="/integrations/{{ provider_id }}/{{ connection.id }}/test"><button type="submit" class="btn">Test connection</button></form>
      <form method="post" action="/integrations/{{ provider_id }}/{{ connection.id }}/disconnect"><button type="submit" class="btn btn-danger">Disconnect</button></form>
    </div>
    {% if problems %}
    <ul class="capabilities">
      {% for capability in problems %}
      <li>
        <span class="badge badge-fail" style="justify-self: start">✕ Not working</span>
        <span>
          {{ capability.label }}
          {% if capability.detail %}<span class="muted" style="display: block; font-size: 12.5px">{{ capability.detail }}{% if capability.fix_url %} <a href="{{ capability.fix_url }}" target="_blank" rel="noopener">Enable it</a>, then test again.{% endif %}</span>{% endif %}
        </span>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
{% endmacro %}

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

{% if message %}<div class="alert alert-success panel-narrow" role="status"><span class="alert-tag">✓ DONE</span><span>{{ message }}</span></div>{% endif %}
{% if error %}<div class="alert alert-error panel-narrow" role="alert"><span class="alert-tag">✕ ERROR</span><span>{{ error }}</span></div>{% endif %}

<h2 class="label services-title">Connected sources</h2>
<div class="services">
  <section class="panel service" aria-label="Google">
    <div class="integration">
      <span class="integration-logo" aria-hidden="true">G</span>
      <div style="min-width: 0">
        <div class="integration-name"><strong>Google</strong><span class="label">Gmail · Calendar · YouTube</span></div>
        <div class="muted" style="font-size: 12.5px">{% if not client %}myOrb connects through your own Google Cloud OAuth client. Setting it up takes about 10 minutes and is free.{% elif not connections %}The OAuth client is set up. Connect your Google account.{% else %}Email, calendar and YouTube subscriptions of your Google accounts.{% endif %}</div>
      </div>
      <div class="actions">
        {% if not client %}<span class="badge badge-neutral">○ Not set up</span><a class="btn btn-primary" href="/integrations/google/setup">Set up Google</a>
        {% else %}
        {% if not connections %}<span class="badge badge-neutral">○ No account</span>{% endif %}
        <a class="btn btn-ghost" href="/integrations/google/setup">OAuth client</a>
        <form method="post" action="/integrations/google/connect" hx-boost="false"><button type="submit" class="btn {{ '' if connections else 'btn-primary' }}">{{ "Connect another" if connections else "Connect a Google account" }}</button></form>
        {% endif %}
      </div>
    </div>
    {% for connection in connections %}{{ account_row(connection, "google") }}{% endfor %}
  </section>

  {% for provider, accounts in providers %}
  <section class="panel service" aria-label="{{ provider.name }}">
    <div class="integration">
      <span class="integration-logo" aria-hidden="true">{{ provider.logo }}</span>
      <div style="min-width: 0">
        <div class="integration-name"><strong>{{ provider.name }}</strong>{% if accounts | length > 1 %}<span class="label">{{ accounts | length }} connected</span>{% endif %}</div>
        <div class="muted" style="font-size: 12.5px">{{ provider.summary }}</div>
      </div>
      <div class="actions">
        {% if not accounts %}<span class="badge badge-neutral">○ Not connected</span>{% endif %}
        {% if not accounts or provider.multiple %}<a class="btn {{ 'btn-primary' if not accounts else '' }}" href="/integrations/{{ provider.id }}/connect">{{ "Connect another" if accounts else "Connect" }}</a>{% endif %}
      </div>
    </div>
    {% for connection in accounts %}{{ account_row(connection, provider.id, provider.choices_label) }}{% endfor %}
  </section>
  {% endfor %}
</div>

<h2 class="label services-title">Features</h2>
<section class="panel service" aria-label="Features">
  {% for name, settings in plugin_settings %}
  <div class="integration">
    <span class="integration-logo" aria-hidden="true">{{ settings.logo }}</span>
    <div>
      <div class="integration-name"><strong>{{ name }}</strong></div>
      <div class="muted" style="font-size: 12.5px">{{ settings.summary }}</div>
    </div>
    <div class="actions"><a class="btn" href="{{ settings.url }}">Settings</a></div>
  </div>
  {% endfor %}
  <div class="integration">
    <span class="integration-logo" aria-hidden="true">♪</span>
    <div>
      <div class="integration-name"><strong>Music</strong><span class="label">Welcome screen</span></div>
      <div class="muted" style="font-size: 12.5px">Built-in ambient sound, or a YouTube video, playlist or live stream.</div>
    </div>
    <div class="actions"><a class="btn" href="/integrations/music">Settings</a></div>
  </div>

  <div class="integration">
    <span class="integration-logo" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9h4l5-4v14l-5-4H4z"/><path d="M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11"/></svg></span>
    <div>
      <div class="integration-name"><strong>Voice</strong><span class="label">Read aloud</span></div>
      <div class="muted" style="font-size: 12.5px">{% if voice.azure %}Microsoft Azure Speech reads the brief.{% else %}The browser's own voices read the brief, or natural voices from Microsoft Azure Speech.{% endif %}</div>
    </div>
    <div class="actions">{% if voice.azure %}<span class="badge badge-ok">✓ Azure Speech</span>{% endif %}<a class="btn" href="/integrations/voice">Settings</a></div>
  </div>

  <div class="integration">
    <span class="integration-logo" aria-hidden="true">AI</span>
    <div>
      <div class="integration-name"><strong>Claude</strong><span class="label">Daily brief</span></div>
      <div class="muted" style="font-size: 12.5px">{% if claude %}Writes your brief every day at {{ claude.brief_time }} with {{ model_name(claude.model) }}.{% else %}Writes a short daily brief from your calendar, email and tasks, with your own Anthropic API key.{% endif %}</div>
    </div>
    <div class="actions">
      {% if claude %}<span class="badge badge-ok">✓ Connected</span><a class="btn" href="/integrations/claude">Settings</a>
      {% else %}<span class="badge badge-neutral">○ Not set up</span><a class="btn btn-primary" href="/integrations/claude">Connect Claude</a>{% endif %}
    </div>
  </div>
</section>
{% endblock %}