{% extends "base.html" %}

{% block title %}PhysikMDB - Excitons of {{ system.short_name }} ({{ calculation.xc_functional }} / {{
calculation.basis_set
}})
{% endblock %}

{% block head %}
{{ super() }}
<meta name="robots" content="noindex">
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='styles/entry.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/exciton.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/help.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/tour.css') }}">
{% endblock %}

{% block javascript %}
<link rel="stylesheet" href="{{ url_for('static', filename='styles/uplot.min.css') }}">
{# Same loading model as entry.html: uPlot/THREE stay classic scripts exposing
globals, the app's own code is ES modules and pulls in what it needs. #}
<script src="{{ url_for('static', filename='javascript/libraries/uplot.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/libraries/three.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='javascript/exciton-page.js') }}" type="module"></script>
{% endblock %}

{% block header %}
<header class="header">
    <a class="back-button" href="/" title="Back to all systems">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
    </a>
    <h1>{{ system.full_name }} <span class="subtitle">({{
            system.formula | subscript }}) - excitons of #{{ calculation.id }}</span>
    </h1>
    <div class="meta-info">
        <span class="badge" title="Exchange-correlation functional. Full parameters are in the Info tab.">{{ calculation.xc_functional }}</span>
        <span class="badge" title="Gaussian basis set. Full parameters are in the Info tab.">{{ calculation.basis_set }}</span>
        <span class="badge" title="Excited states solved for in this calculation.">{{ excitations | length }} roots</span>
        {% with view = 'excitons' %}{% include "_header_view_switch.html" %}{% endwith %}
    </div>
    <nav class="header-nav">
        <a href="{{ url_for('static', filename='misc/main.pdf') }}"
            title="The derivation behind these pages: photoemission orbital tomography for an LCAO-GTO basis set (PDF)">Theory</a>
        <a href="/imprint">Imprint</a>
        <span class="badge-anchor"><button type="button" id="share-link" class="help-toggle"
                title="Copies a link carrying every Plot Controls setting and the mapped state/photohole pairs.
Colours, sizes and visibility toggles do not travel. Energies travel as eV whatever unit is displayed.">Share</button>
            <button type="button" class="help-badge"
                data-help="A link that reopens this exact view for someone else. It carries the physics — the coverage target, the hole position, the light, the selected state and holes — and deliberately not the styling.">?</button></span>
        <button type="button" id="help-toggle" class="help-toggle" aria-pressed="false"
            title="Show a help badge on everything that needs explaining">?</button>
    </nav>
</header>
{% endblock %}

{% block content %}
<div class="main-container" data-calculation-id="{{ id }}" data-short-name="{{ system.short_name }}"
    data-basis-url="{{ url_for('static', filename='data/' ~ calculation.data_path ~ '/basis.bin') }}"
    data-coefficients-url="{{ url_for('static', filename='data/' ~ calculation.data_path ~ '/coefficients.bin') }}"
    data-excitons-url="{{ url_for('static', filename='data/' ~ calculation.data_path ~ '/excitons.json') }}">

    {# Transitions #}
    <section class="panel exciton-transitions" data-tour="transitions">
        <h2 class="panel-title"
            title="One arrow per configuration of the selected state: an electron moved from an occupied orbital to a virtual one.
Circle AREA - not its radius - is that configuration's share of the state, X², so r ∝ |X|.
The arrow itself carries the signed amplitude X, which is what the Dyson orbital is written with.
Levels sit at their own energy in eV; the gap is a fixed break, every other spacing is to scale.
Click a transition or a hole label to map that photohole.">
            <span class="panel-title-name">TRANSITIONS<button type="button" class="help-badge"
                    data-help="How the excited state is built out of ground-state orbitals. A TD-DFT state is a sum of electron-hole configurations, each moving one electron from an occupied orbital to a virtual one; the arrows are those configurations, and the circles are how much of the state each one carries.">?</button></span>
            <span class="panel-title-note" id="transition-coverage"></span>
        </h2>
        <div id="transition-diagram"></div>
    </section>

    {# The real-space view has no panel of its own here: it is the momentum
    panel's third view, behind the Real button in its header. #}
    {% with subheader_id = 'momentum-dyson', ekin_strip = true, real_space_view = true,
    hole_view_toggle = true %}
    {% include "_panel_momentum.html" %}
    {% endwith %}

    {# Excitons #}
    <section class="panel exciton-list" data-tour="exciton-list">
        <h2 class="panel-title"
            title="One row per excited state. Expand with the triangle for the photoholes it emits from.
Each hole has its own Dyson orbital and its own E_kin = hν + E_orbital + Ω, so it draws its own map.
Click a state to map its heaviest hole; Ctrl/Cmd-click to sum holes, within one state only.">
            <span class="panel-title-name">EXCITONS <span class="panel-title-sub">/ HOLES</span><button type="button"
                    class="help-badge"
                    data-help="The excited states, and the photoholes each one can leave behind. An exciton is a correlated electron-hole pair, so it does not emit from a single orbital: an entangled state emits from several holes at once, each at its own kinetic energy, and produces a different momentum map at each.">?</button></span>
            <span class="panel-title-note" id="exciton-label"></span>
        </h2>
        <div id="exciton-list-container">
            <table class="clickable-table" id="exciton-list-table">
                {# Column widths live on the colgroup, not the cells: the table
                is table-layout: fixed (base.css), which takes its widths from
                the first row - and the first row is an exciton row, while the
                hole rows below it carry different content. #}
                <colgroup>
                    <col class="exciton-list-plot-column">
                    <col class="exciton-list-name-column">
                    <col class="exciton-list-symmetry-column">
                    <col class="exciton-list-weight-column">
                    <col class="exciton-list-energy-column">
                </colgroup>
                <tbody>
                    {% for state in excitations %}
                    <tr class="exciton-row" id="exciton-row-{{ state.idx }}" data-exciton-idx="{{ state.idx }}"
                        title="{{ state.contribution_count }} orbital pair(s) stored, covering the calculation's ingest-time coverage target; the largest carries {{ '%.1f' | format(100 * state.largest_contribution) }} % of the state">
                        <td class="exciton-list-toggle-cell"><span class="exciton-toggle"
                                title="Show the photoholes of this state">▸</span></td>
                        <td class="exciton-list-name"><span class="exciton-state">S<sub>{{ state.idx
                                    }}</sub></span><span class="exciton-case"
                                id="exciton-case-{{ state.idx }}"></span><span class="exciton-coverage"
                                id="exciton-coverage-{{ state.idx }}"></span>{% if state.multiplicity == 3.0 %}<span class="state-mark"
                                title="Triplet state">T</span>{% endif %}{% if not state.tda %}<span class="state-mark"
                                title="Not a Tamm-Dancoff state: it carries deexcitations, and exciton momentum maps are not settled for those. This state cannot be mapped.">RPA</span>{%
                            endif %}</td>
                        <td class="exciton-list-symmetry"
                            title="Irreducible representation of the excited state, in the {{ system.point_group }} point group.">{{
                            state.symmetry or '&mdash;' | safe }}</td>
                        <td class="exciton-list-weight"
                            title="Oscillator strength, length representation. Dimensionless; zero for a dark state.
Transition dipole moment |μ| = {{ '%.3f' | format(state.dipole_magnitude) }} a.u., μ = ({{ '%.3f' | format(state.dipole[0] or 0) }}, {{ '%.3f' | format(state.dipole[1] or 0) }}, {{ '%.3f' | format(state.dipole[2] or 0) }}) a.u.">{{
                            '%.3f' | format(state.oscillator_strength or 0) }}</td>
                        <td class="exciton-list-energy"
                            title="Excitation energy Ω above the ground state, in the unit selected under Display."
                            data-energy-ev="{{ state.energy_ev }}">{{ '%.3f' |
                            format(state.energy_ev) }} eV</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {# Every root, so the absorption spectrum is complete on first paint
        without waiting for excitons.json (src/app.py:exciton) #}
        <script type="application/json" id="excitation-data">{{ excitations | tojson }}</script>
        {# The ground-state valence window, for the E_kin strip's grey overlay #}
        <script type="application/json" id="orbital-energy-data">{{ orbital_energies | tojson }}</script>
    </section>

    {# Info Area #}
    <section class="panel info-tabs" data-tour="info-tabs">
        <nav class="tab-sidebar">
            <button role="tab" class="tab-link active" id="tab-link-info" title="System Information">
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
                    <line x1="7" y1="7" x2="7.01" y2="7" />
                </svg>
            </button>
            <button role="tab" class="tab-link" id="tab-link-controls" title="Plot Controls">
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <line x1="4" y1="21" x2="4" y2="14" />
                    <line x1="4" y1="10" x2="4" y2="3" />
                    <line x1="12" y1="21" x2="12" y2="12" />
                    <line x1="12" y1="8" x2="12" y2="3" />
                    <line x1="20" y1="21" x2="20" y2="16" />
                    <line x1="20" y1="12" x2="20" y2="3" />
                    <line x1="1" y1="14" x2="7" y2="14" />
                    <line x1="9" y1="8" x2="15" y2="8" />
                    <line x1="17" y1="16" x2="23" y2="16" />
                </svg>
            </button>
            <button role="tab" class="tab-link" id="tab-link-calculations" title="Related Calculations">
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="6" r="3" />
                    <circle cx="18" cy="18" r="3" />
                    <path d="M9 12h3" />
                    <path d="M12 12l3 -4.5" />
                    <path d="M12 12l3 4.5" />
                </svg>
            </button>
            <button role="tab" class="tab-link" id="tab-link-export" title="Export">
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <g transform="matrix(0.907264,0,0,0.907264,1.265696,1.617905)">
                        <path d="M0.67,21.785L22.993,21.785" fill="none" stroke="currentColor" stroke-width="2.2" />
                    </g>
                    <g transform="matrix(0.907264,0,0,1.117834,1.112836,1.090735)">
                        <g transform="matrix(1.102215,-0,-0,0.894587,-1.226585,-0.975758)">
                            <path d="M18,11.481L12,17.481L6,11.481" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linejoin="miter" stroke-miterlimit="10" />
                            <path d="M12,2.059L12,17.481" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linejoin="bevel" />
                        </g>
                    </g>
                </svg>
            </button>
        </nav>

        <div class="tab-content tab-panes-container">
            {% include "_panel_info_pane.html" %}
            {% with extra_control_tab = {'group': 'exciton', 'label': 'Exciton',
            'title': 'Which map an exciton draws, and which transitions go into it'},
            extra_control_groups = '_panel_controls_exciton.html',
            allow_nm_unit = true, kpath = true, dipole = true %}
            {% include "_panel_controls.html" %}
            {% endwith %}
            {% include "_panel_calculations.html" %}
            {% include "_panel_export.html" %}
        </div>
    </section>

    {# Absorption Spectrum #}
    <section class="panel energy-spectrum" data-tour="energy-spectrum">
        <h2 class="panel-title"
            title="σ(E) = 1.0976 Σ f_m g(E − Ω_m), in Ų.
Every root gets a faint stem, dark ones included; the selected state gets a full one.
Click the plot to jump to the nearest exciton. Line shape and width are under Sampling.">
            <span class="panel-title-name">ABSORPTION SPECTRUM<button type="button" class="help-badge"
                    data-help="The optical absorption these excited states would produce, each weighted by its oscillator strength. A dark state has zero oscillator strength and so lifts the curve nowhere, but it is still marked, because it is a real state that simply cannot be reached by light.">?</button></span>
            <span class="panel-title-note" id="line-profile-label"></span>
            <span class="panel-title-actions">
                <span class="badge-anchor" data-tour="line-profile"><button id="line-profile-toggle"
                        class="header-toggle"
                        title="Switch between the absorption spectrum and I(k∥), a cut along the k-Path through the momentum map on screen.">Profile</button>
                    <button type="button" class="help-badge"
                        data-help="One line through the exciton's momentum map, along the k-Path set under Sampling. It is the profile an analyser records at a single kinetic energy, so a calculated line shape can be laid over a measured one.">?</button></span>
            </span>
        </h2>
        <div id="energy-plot"></div>
        {# The panel shows two different quantities, so its name, its tooltip and
        its ? badge change with the view. The spectrum's are on the heading above;
        the profile's ride here, so all four stay in the template. #}
        <div id="line-profile-plot" hidden data-panel-name="LINE PROFILE"
            data-panel-title="I(k∥) along the k-Path, cut from the Dyson orbital's momentum map on screen.
Intensity in arbitrary units; the axis walks k₁ → k₂ → k₃ and its numbers are k∥ = |k| in Å⁻¹.
The vertical range is the map's own, set by Intensity Scale in Plot Controls.
Drag to zoom, double-click to reset, right-click for export formats."
            data-panel-help="Intensity along the k-Path across the exciton's momentum map, set under Sampling. A measured cut is usually published in exactly this form, so it is the plot to lay a calculation and an experiment over each other in."></div>
    </section>

</div>
{% endblock %}