{% extends "base.html" %}

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

{% block meta_description %}
<meta name="description" content="{{ system.short_name }} ({{ system.formula }}): molecular orbitals, orbital energies and photoemission orbital tomography maps from a {{ calculation.xc_functional }}/{{ calculation.basis_set }} calculation.">
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='styles/entry.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') }}">
{# uPlot/THREE stay classic scripts exposing globals; the app's own code is ES
modules, so entry.js imports what it needs and only it is listed here.
Deferred classic scripts and module scripts run in document order, so the
two globals exist by the time entry.js runs. #}
<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/entry.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 }}) - #{{ 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="Total charge of the molecule, in e.">q = {{ calculation.charge | int
            if calculation.charge is not none else "&mdash;" | safe }}</span>
        <span class="badge" title="Spin multiplicity 2S+1. 1 = singlet, 3 = triplet.">2S+1 = {{ (2 *
            calculation.spin + 1) | int if calculation.spin is not none else "&mdash;" | safe }}</span>
        {% with view = 'orbitals' %}{% 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" data-tour="share"
                title="Copies a link carrying every Plot Controls setting, the selected orbitals and their weights.
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 — orientation, light, energies, sampling, selection — and deliberately not the styling, so the recipient sees your numbers in their own colours.">?</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') }}">

    {% include "_panel_real_space.html" %}

    {% with band_map = true %}{% include "_panel_momentum.html" %}{% endwith %}

    {# Orbital List #}
    <section class="panel orbital-list" data-tour="orbital-list">
        <h2 class="panel-title"
            title="Orbitals in a [−15, +10] eV window around the HOMO, highest energy first.
Click one to show it everywhere; Ctrl-click (Cmd on a Mac) to combine several into one weighted map,
Shift-click to take every orbital in between.
Scroll to either end to load more. Columns: name, weight, symmetry, occupation, orbital energy.">
            <span class="panel-title-name">ORBITALS<button type="button" class="help-badge"
                    data-help="Every orbital near the HOMO, each with its own momentum map as a thumbnail, so the whole valence region can be scanned at once. Ctrl/Cmd-click adds one orbital to the selection and Shift-click adds the whole run between; combining several sums their intensities and not their amplitudes, because photoelectrons from different initial states do not interfere. Each thumbnail is drawn out to its own emission horizon, so a deeply bound orbital&#39;s disk is the smaller one.">?</button></span>
            <span class="panel-title-actions">
                <span class="badge-anchor"><button type="button" id="reset-weights"
                        class="header-toggle weight-reset"
                        title="Reset every selected orbital's weight to the value implied by hν, E_kin and the spectrum broadening.">↺</button>
                    <button type="button" class="help-badge"
                        data-help="Weights normally follow the energies: each orbital counts by how far hν + E_orbital lands from the fixed E_kin, under the spectrum's line shape. Typing a weight pins it; this releases every pin.">?</button></span>
            </span>
            {% if orbitals and orbitals[0].spin_channel is not none %}
            <span class="badge-anchor">
                <div class="spin-toggle" id="spin-toggle">
                    <button class="spin-toggle-button active" data-spin-channel="1"
                        title="Show the spin-up (α) orbitals. Switching jumps to that channel's HOMO.">α</button>
                    <button class="spin-toggle-button" data-spin-channel="0"
                        title="Show the spin-down (β) orbitals. Switching jumps to that channel's HOMO.">β</button>
                </div>
                <button type="button" class="help-badge"
                    data-help="An unrestricted calculation solves the two spin channels separately, so it has two independent sets of orbitals with their own energies and their own HOMO. Only one channel is listed at a time.">?</button>
            </span>
            {% endif %}
        </h2>
        <div id="orbital-list-container">
            <table class="clickable-table" id="orbital-list-table">
                {# The column widths have to live here rather than on the cells:
                tables are table-layout: fixed (base.css), which takes its
                widths from the first row, and orbital-list.js prepends a
                colspan="6" "load more" sentinel as soon as there is more to
                page in - which silently made every column equal. #}
                <colgroup>
                    <col class="orbital-list-plot-column">
                    <col class="orbital-list-name-column">
                    <col class="orbital-list-weight-column">
                    <col class="orbital-list-symmetry-column">
                    <col class="orbital-list-occupation-column">
                    <col class="orbital-list-energy-column">
                </colgroup>
                <tbody>
                    {% for orbital in orbitals|reverse %}
                    <tr class="{{ 'even' if loop.index is even else 'odd' }}" id="orbital-list-item-{{ orbital.idx }}"
                        data-spin-channel="{{ '' if orbital.spin_channel is none else orbital.spin_channel }}">
                        <td class="orbital-list-plot-cell">
                            <div class="orbital-list-plot" data-orbital-name="{{ orbital.name }}"
                                data-orbital-index="{{ orbital.idx }}"
                                data-orbital-energy="{{ orbital.energy | hartree_to_ev }}"
                                id="orbital-list-plot-{{ orbital.idx }}"></div>
                        </td>
                        <td class="orbital-list-name">{{ orbital.name }}{% if orbital.name == 'HOMO'
                            %}<span class="homo-dot" title="Highest occupied molecular orbital"> ●</span>{% endif
                            %}{% if orbital.name == 'LUMO'
                            %}<span class="lumo-dot" title="Lowest unoccupied molecular orbital"> ●</span>{% endif
                            %}</td>
                        {# Only visible (not just unhidden - see entry.css) on a
                        selected row while several orbitals are combined, so the
                        column's own width never shifts the rest of the row. #}
                        <td class="orbital-list-weight-cell">
                            <input type="number" class="orbital-weight" min="0" step="0.01" value="1"
                                title="Weight of this orbital in the combined momentum map. Intensities are summed, so this scales |ψ̃(k)|² and not ψ.">
                        </td>
                        <td class="orbital-list-symmetry"
                            title="Irreducible representation in the {{ system.point_group }} point group">{{
                            orbital.symmetry }}</td>
                        <td class="orbital-list-occupation" title="Occupation: electrons in this orbital.">{{
                            orbital.occupation | int }}</td>
                        <td class="orbital-list-energy" title="Orbital energy relative to the vacuum level, negative for a bound orbital. Shown in the unit selected under Display."
                            data-energy-ev="{{ orbital.energy | hartree_to_ev }}">{{ '%.3f' %
                            (orbital.energy | hartree_to_ev) }} eV</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {# Every orbital's energy in the ±10 eV window, both spin channels -
        independent of how many rows orbital-list.js has actually loaded,
        so the energy plot (entry.js initEnergyPlot) is correct from the
        first paint. #}
        <script type="application/json" id="orbital-energies-data">{{ orbital_energies | tojson }}</script>
    </section>

    {# Info Area #}
    <section class="panel info-tabs" data-tour="info-tabs">
        <nav class="tab-sidebar">
            <button type="button" class="help-badge"
                data-help="Four views of this calculation behind one panel: what it is, the settings behind every plot on the page, the other calculations of the same molecule, and everything on screen as a file.">?</button>
            {# TODO: Make new icons for tabs #}
            <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 kpath = true, band_map = true, photoemission = true %}{% include "_panel_controls.html" %}{% endwith %}

            {% include "_panel_calculations.html" %}

            {% include "_panel_export.html" %}
        </div>
    </section>

    {# Energy Spectrum #}
    <section class="panel energy-spectrum" data-tour="energy-spectrum">
        <h2 class="panel-title"
            title="Density of states from the orbital energies in a [−15, +10] eV window around the HOMO.
Red = HOMO, blue = LUMO, dashed = vacuum level. Unrestricted runs mirror spin-down below the axis.
EDC peak scaling makes it a photoemission spectrum instead, over the loaded orbitals.
Drag to zoom, double-click to reset. Line shape, width, axis and peak scaling are under Sampling in Plot Controls.">
            <span class="panel-title-name">ENERGY SPECTRUM<button type="button" class="help-badge"
                    data-help="The orbital energies beside it, broadened into a density of states. The broadening is a drawing choice and carries no lifetime information, so the peak positions are the physics and the widths are not.">?</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 density of states 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 momentum map, along the same k-Path the band map uses. It is the profile an analyser records at a single 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 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 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 %}