{% load environment_config %}
{% research_environment_config as environment_config %}

{% if billing_accounts_list|length %}
    {# dictsort puts owned accounts last, so this is an owned account if the user has any. #}
    {% with owned_account=billing_accounts_list|dictsort:"is_owner"|last %}
    <div class="d-flex flex-column align-items-end px-4 mb-3">
        <a class="btn btn-primary btn-sm" href="https://console.cloud.google.com/billing/create?organizationId=3105849901" target="_blank">
          {% if owned_account.is_owner %}
            + Billing Account
          {% else %}
            + Create your own billing account (optional)
          {% endif %}
        </a>
    </div>
    {% endwith %}

    <ul class="list-group list-group-flush">
        <li class="list-group-item">
            <div class="row">
                <div class="col-md-8">
                    <strong>
                        Name
                    </strong>
                </div>
                <div class="col-md-4">
                    <strong>
                        Actions
                    </strong>
                </div>
            </div>
        </li>
        {% for billing_account in billing_accounts_list %}
            <li class="list-group-item">
                <div class="row">
                    <div class="col-md-8">
                    {% if billing_account.is_owner %}
                        <a href="{{ billing_account.cloud_link }}" target="_blank">
                            {{ billing_account.name }}, {{ billing_account.id }}
                        </a>
                    {% else %}
                        {{ billing_account.name }}, {{ billing_account.id }}
                        <small class="d-block text-muted">
                            Shared with you: select it when you create a workspace. No Google Cloud console access is needed.
                        </small>
                    {% endif %}
                    </div>
                    <div class="col-md-4">
                    {% if billing_account.is_owner %}
                        <a href="{% url 'manage_billing_account' billing_account_id=billing_account.id %}" class="btn btn-sm btn-primary">
                            Manage
                        </a>
                    {% else %}
                        Shared
                    {% endif %}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="container text-center">
        You don't have any billing accounts yet.<br>
    </div>
    <div class="alert alert-info mt-3" role="alert">
        Accepted a billing-share invite or joined an event? The shared billing account can take a minute to appear here, so refresh this page shortly. You don't need to create your own billing account or request Google Cloud console access.
    </div>
    <div>
        <h6>
            Using a shared account:
        </h6>
        <ol>
            <li>
                <span class="font-italic">The owner of a billing account can send out invitations to use a shared account via e-mail. The specific address you use doesn't have to be connected with {{ environment_config.site_name }}.</span>
            </li>
            <li>
                <span class="font-italic">Clicking the link in the e-mail message will prompt you to log in to {{ environment_config.site_name }} and consume the invitation.</span>
            </li>
            <li>
                <span class="font-italic">You can use shared billing accounts to create resources in the platform the same way you would use one that was created by you.</span>
            </li>
        </ol>
        <h6>
            Or create your own billing account:
        </h6>
        <ol>
            <li>
                <span class="font-italic">Visit <a href="https://console.cloud.google.com/billing/create?organizationId=3105849901" target="_blank">the Google Cloud Platform console</a> and follow the instructions there.</span>
            </li>
            <li>
                <span class="font-italic">After supplying your billing information, the created billing account will become accessible via this panel.</span>
            </li>
        </ol>
        <span >After the process is complete go to Running Environments tab and create your first workspace.</span>
    </div>
{% endif %}