{% 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, editable=False) %}
  {% 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 %}
      {# The account's actions in one menu, so the list stays calm: only states stand out. #}
      <details class="menu">
        <summary class="icon-btn" aria-label="Actions for {{ connection.account }}" title="Actions">⋯</summary>
        <div class="menu-panel">
          {% if editable %}<a class="menu-item" href="/integrations/{{ provider_id }}/{{ connection.id }}/edit">Edit…</a>{% endif %}
          {% if choices_label %}<a class="menu-item" 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="menu-item">Test connection</button></form>
          <form method="post" action="/integrations/{{ provider_id }}/{{ connection.id }}/disconnect"><button type="submit" class="menu-item is-danger">Disconnect</button></form>
        </div>
      </details>
    </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 %}

{# A service's logo: its brand icon in myOrb's color, or its letters. #}
{% macro logo(letters, icon=None) %}
  {% if icon %}<span class="integration-logo" aria-hidden="true"><span class="brand-icon" style="--icon: url('{{ url_for('static', path='icons/brands/' ~ icon ~ '.svg') }}')"></span></span>
  {% else %}<span class="integration-logo" aria-hidden="true">{{ letters }}</span>{% endif %}
{% endmacro %}

{# How often a service's data is fetched and how many requests it got in the last hour, as
   numbers in the middle of its row. #}
{% macro pace(stats) %}
  {# Two slots in fixed places, so the numbers line up from service to service. #}
  <div class="pace">
    {% if stats and stats.shown %}
    {% if stats.every and stats.options %}
    {# A choice: the tile opens the paces to choose from. #}
    <details class="menu pace-menu">
      <summary class="pace-stat is-choice" title="How often myOrb fetches its data, as the border of its number on the welcome screen shows. Click to change it."><span class="num">{{ stats.every | replace("every ", "") }} <span class="pace-caret" aria-hidden="true">▾</span></span><span class="label">Refreshes every</span></summary>
      {# Only this service's row is redrawn: the page stays where it is. #}
      <form class="menu-panel" method="post" action="/integrations/{{ stats.service }}/pace" hx-post="/integrations/{{ stats.service }}/pace" hx-target="#service-{{ stats.service }}" hx-select="#service-{{ stats.service }}" hx-swap="outerHTML">
        {% for seconds, label in stats.options %}
        <button type="submit" name="seconds" value="{{ seconds | int }}" class="menu-item{% if stats.chosen == seconds %} is-chosen{% endif %}">{{ label }}</button>
        {% endfor %}
        <button type="submit" name="seconds" value="default" class="menu-item is-default{% if not stats.chosen %} is-chosen{% endif %}">Default ({{ stats.default | replace("every ", "") }})</button>
      </form>
    </details>
    {% elif stats.every %}<div class="pace-stat" title="How often myOrb fetches its data; each source sets its own (Edit…)"><span class="num">{{ stats.every | replace("every ", "") }}</span><span class="label">Refreshes every</span></div>
    {% else %}<div class="pace-slot"></div>{% endif %}
    <div class="pace-stat{% if stats.limited %} warn{% endif %}" title="Requests myOrb sent to the service in the last hour, for its rate limits{% if stats.limited %}; {{ stats.limited }} answered asking myOrb to wait (HTTP 429){% endif %}"><span class="num">{{ stats.requests }}{% if stats.limited %} <small>{{ stats.limited }}× limited</small>{% endif %}</span><span class="label">Requests · last hour</span></div>
    {% 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 service-head" id="service-google">
      {{ logo("G", "google") }}
      <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>
      {{ pace(google_pace if connections else none) }}
      <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 btn-small" href="/integrations/google/setup">OAuth client</a>
        <form method="post" action="/integrations/google/connect" hx-boost="false"><button type="submit" class="btn {{ 'btn-ghost btn-small' if connections else 'btn-primary' }}">{{ "+ Add account" 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 service-head" id="service-{{ provider.id }}">
      {{ logo(provider.logo, provider.icon) }}
      <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>
      {{ pace(paces[provider.id]) }}
      <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 'btn-ghost btn-small' }}" href="/integrations/{{ provider.id }}/connect">{{ "+ Add " ~ provider.account_noun if accounts else "Connect" }}</a>{% endif %}
      </div>
    </div>
    {% for connection in accounts %}{{ account_row(connection, provider.id, provider.choices_label, editable=True) }}{% 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">
    {{ logo("AI", "anthropic") }}
    <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) }}.{% if claude_spent %} {{ claude_spent[1] }}{{ "%.2f" | format(claude_spent[0]) }} in the last 30 days.{% endif %}{% 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 %}