<!-- Molecule Info -->
<div class="row py-2">
    <div class="col-xl-4">
        <div class="border border-dark mt-4">
            <script>doodle_molecule('{{ calculation.sdf_str }}', {{ calculation.id }}, 300)</script>
        </div>
    </div>
    <div class="col-xl-8">
        <!-- Molecule formats -->
        <ul class="nav nav-tabs nav-bordered mb-3">
            <li class="nav-item">
                <a href="#smiles"
                   data-bs-toggle="tab"
                   aria-expanded="false"
                   class="nav-link active ">
                    <i class="mdi mdi-home-variant d-md-none d-block"></i>
                    <span class="d-none d-md-block">SMILES</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#inchi"
                   data-bs-toggle="tab"
                   aria-expanded="true"
                   class="nav-link">
                    <i class="mdi mdi-account-circle d-md-none d-block"></i>
                    <span class="d-none d-md-block">INCHI</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#inchi_key"
                   data-bs-toggle="tab"
                   aria-expanded="false"
                   class="nav-link">
                    <i class="mdi mdi-settings-outline d-md-none d-block"></i>
                    <span class="d-none d-md-block">INCHI KEY</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#sdf_ctab"
                   data-bs-toggle="tab"
                   aria-expanded="false"
                   class="nav-link">
                    <i class="mdi mdi-settings-outline d-md-none d-block"></i>
                    <span class="d-none d-md-block">SDF (c-tab)</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#origmol"
                   data-bs-toggle="tab"
                   aria-expanded="false"
                   class="nav-link">
                    <i class="mdi mdi-settings-outline d-md-none d-block"></i>
                    <span class="d-none d-md-block">Original Input</span>
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane show active" id="smiles">
                <div class="row bg-light p-0 m-0 border border-secondary-lighten">
                    <div class="col-11 mt-1">
                        <pre id="smiles_text" class="text-center">{{ calculation.smiles }}</pre>
                    </div>
                    <div class="col-1">
                        <button onclick="copyTextById('smiles_text')"
                                class="btn btn-outline-secondary btn-sm border border-light"
                                data-bs-toggle="popover"
                                data-bs-trigger="hover"
                                data-bs-placement="bottom"
                                data-bs-content="Click to copy">
                            <i class="mdi mdi-content-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="inchi">
                <div class="row bg-light p-0 m-0 border border-secondary-lighten">
                    <div class="col-11 mt-1">
                        <pre id="inchi_text" class="text-center">{{ calculation.inchi }}</pre>
                    </div>
                    <div class="col-1">
                        <button onclick="copyTextById('inchi_text')"
                                class="btn btn-outline-secondary btn-sm border border-light"
                                data-bs-toggle="popover"
                                data-bs-trigger="hover"
                                data-bs-placement="bottom"
                                data-bs-content="Click to copy">
                            <i class="mdi mdi-content-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="inchi_key">
                <div class="row bg-light p-0 m-0 border border-secondary-lighten">
                    <div class="col-11 mt-1">
                        <pre id="inchi_key_text" class="text-center">{{ calculation.inchi_key }}</pre>
                    </div>
                    <div class="col-1">
                        <button onclick="copyTextById('inchi_key_text')"
                                class="btn btn-outline-secondary btn-sm border border-light"
                                data-bs-toggle="popover"
                                data-bs-trigger="hover"
                                data-bs-placement="bottom"
                                data-bs-content="Click to copy">
                            <i class="mdi mdi-content-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="sdf_ctab">
                <div class="row bg-light p-0 m-0 border border-secondary-lighten">
                    <div class="col-11 mt-1">
                        <pre id="sdf_ctab_text">
                            <small>{{ calculation.molecule }}</small>
                        </pre>
                    </div>
                    <div class="col-1">
                        <button onclick="copyTextById('sdf_ctab_text')"
                                class="btn btn-outline-secondary btn-sm border border-light"
                                data-bs-toggle="popover"
                                data-bs-trigger="hover"
                                data-bs-placement="bottom"
                                data-bs-content="Click to copy">
                            <i class="mdi mdi-content-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="origmol">
                <div class="row bg-light p-0 m-0 border border-secondary-lighten">
                    <div class="col-11 mt-1">
                        <pre id="origmol_text">
                            <small>{{ calculation.molecule_original }}</small>
                        </pre>
                    </div>
                    <div class="col-1">
                        <button onclick="copyTextById('origmol_text')"
                                class="btn btn-outline-secondary btn-sm border border-light"
                                data-bs-toggle="popover"
                                data-bs-trigger="hover"
                                data-bs-placement="bottom"
                                data-bs-content="Click to copy">
                            <i class="mdi mdi-content-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end molecule formats -->
        <!-- table of properties -->
        <div class="row pt-2">
            <div class="col-xl-6">
                <table class="table table-centered table-striped mb-0 border">
                    <tbody>
                        <tr>
                            <td>non-H Atoms</td>
                            <td>{{ calculation.num_atoms }}</td>
                        </tr>
                        <tr>
                            <td>Stereocenters</td>
                            <td>{{ calculation.num_stereocenters }}</td>
                        </tr>
                        <tr>
                            <td>Rings</td>
                            <td>{{ calculation.num_rings }}</td>
                        </tr>
                        <tr>
                            <td>H acceptors</td>
                            <td>{{ calculation.num_h_acceptors }}</td>
                        </tr>
                        <tr>
                            <td>H donors</td>
                            <td>{{ calculation.num_h_donors }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xl-6">
                <table class="table table-centered table-striped mb-0 border">
                    <tbody>
                        <tr>
                            <td>
                                Log P (predicted)
                            </br>
                            <small>(octanol-water)</small>
                        </td>
                        <td>{{ calculation.log_p_rdkit|floatformat:1 }}</td>
                    </tr>
                    <tr>
                        <td>TPSA (predicted)</td>
                        <td>{{ calculation.tpsa_rdkit|floatformat:1 }}</td>
                    </tr>
                    <tr>
                        <td>SAS</td>
                        <td>{{ calculation.synthetic_accessibility|floatformat:1 }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- end table of properties -->
</div>
</div>
<hr>
<div class="row pt-4">
    <div class="col-xl-5">
        <table class="table table-centered table-striped mb-0 border">
            <thead class="table-primary">
                <tr>
                    <th>Functional Group / Substructure</th>
                    <th>Counts (#)</th>
                </tr>
            </thead>
            <tbody>
                {% for key, value in calculation.functional_groups.items %}
                    <tr>
                        <td>{{ key }}</td>
                        <td>{{ value }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
