<!DOCTYPE html>
<form class="row mb-1 js-tab-submit" method="POST"
    action="{{ url_for('publication.save_session_id', projectname=project.path, action=action, instance=instance) }}">
    <h5 class="mb-3">Set Session ID of TextGrid-{{ instance|capitalize }} Instance</h5>
    <div class="{{tg_session_id and 'col-lg-8' or 'col-lg-10'}} mb-3">
        <input type="text" class="form-control" name="tg_auth_session_id" id="tg_auth_session_id_{{instance}}"
            placeholder="TgAuth Session ID" value="{{ tg_session_id if tg_session_id }}">
    </div>
    <div class="col-lg-2 mb-3">
        <button type="submit" class="btn btn-primary w-100" style="min-width: 48px;">
            <span class="bi bi-floppy2-fill"></span>
            <span class="spinner-border spinner-border-sm" style="display:none;" role="status"
                aria-hidden="true"></span>
        </button>
    </div>
    {% if tg_session_id %}
    <div class="col-lg-2">
        <button type="button" class="btn btn-secondary w-100" style="min-width: 48px;" onclick="
                            this.closest('form').querySelector('input[type=text]').value = '';
                            this.closest('form').querySelector('button[type=submit]').click()
                        ">
            <span class="bi bi-x-circle"></span>
        </button>
    </div>
    {% endif %}
</form>