{% load i18n %}
<!-- Botch the margins to lay over django's annoying readonly box -->
<div class="gcp-wrapper gcp-readonly-wrapper -mx-2">
    <div class="flex flex-col overflow-hidden rounded-md text-sm max-w-2xl">

        <div class="flex flex-col md:flex-row dark:border-gray-700">
            {% if console_url is not None %}
                <a href="{{ console_url }}" target="_blank" class="border-b flex flex-row h-9.5 items-center px-3 py-2 w-48 w-full whitespace-nowrap shrink-0 dark:border-gray-700 md:border-0 md:border-r md:w-48">
                    <span class="material-symbols-outlined mr-2 text-gray-400">
                        cloud
                    </span>
                    {% trans "Existing cloud path" %}
                </a>
            {% else %}
                <div class="border-b flex flex-row h-9.5 items-center px-3 py-2 w-48 w-full whitespace-nowrap shrink-0 dark:border-gray-700 md:border-0 md:border-r md:w-48">            
                    <span class="material-symbols-outlined mr-2 text-gray-400">
                        cloud
                    </span>

                    {% trans "Existing cloud path" %}
                </div>
            {% endif %}

            <div class="flex flex-grow flex-row items-center  h-9.5 min-w-0">
                <div class="gcp-existing-path flex-grow px-3 py-2 truncate">
                    {{ existing_path }}
                </div>

                <div class="gcp-row-controls">
                    <div class="flex flex-rowgap-2 px-2">
                        {% if download_url is not None %}
                            <a class="gcp-download block border leading-relaxed flex flex-row items-center rounded-md px-2 shadow-sm whitespace-nowrap dark:border-gray-700" href="{{ download_url }}" download>
                                <span class="material-symbols-outlined mr-2 text-gray-400">
                                    download
                                </span>
                                {% trans "Download" %}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div> 
        

    </div>
</div>


