<!-- Calculation Info -->
<div class="container p-4">

    <h3>Prefect Cloud:</h3>
    <!-- 
    This block would query Prefect cloud using logic like...  

        if calculation.flow_run_view:
            name = calculation.prefect_flow_run_name # and link to calculation.prefect_cloud_link
            id = calculation.prefect_flow_run_id
            state = calculation.prefect_state
            # and then a button that links to calculation.prefect_cloud_link
        else:
            message = "This workflow run was ran locally and not through Prefect Cloud"

    These queries are slow AND state should be dynamically updated -- Therefore this should be
    done on the front-end. I don't yet know the Javascript needed for this, but I would use
    a prefect api key from the User and use it to query their prefect cloud here.

    For now, I simply leave the next two columns empty to prevent the slow-down.
    -->
    <a>Linking to Prefect Cloud has not been implemented yet.</a>

</div>

<div class="container p-4">

    <h3>Calculation Information:</h3>
    <ul>
        <li><b>File Location:</b> {{ calculation.directory }}</li>
        <li><b>Created at:</b> {{ calculation.created_at }}</li>
        <li><b>Last updated at:</b> {{ calculation.updated_at }}</li>
        <li><b>Corrections Used:</b> {{ calculation.corrections }}</li>
    </ul>

</div>