<script type="text/javascript">
    $(document).ready(function(){
        $('#copy-migration-url-button').on('click', function() {
            navigator.clipboard.writeText($('#migration-url').text());
        });
    });
</script>

{% if migration_url %}
    <div class="bg-red-200 border-red-300 mt-6 p-3 border-2" role="alert">
        <div class="flex md:flex-row flex-col justify-between items-left md:items-center border-b pb-1 mb-1 border-red-300">
            <h1 class="font-semibold md:mb-0">
            🚚 We're moving to a new domain!
            </h1>
        </div>
    <p>
        Use the following link to login to your account on the new site:
        <div class="mt-2">
            <span id="migration-url" class="font-mono block text-sm bg-red-100 py-2 px-4 rounded border border-red-300 break-all flex items-center justify-between">
            <a class="underline" href="{{ migration_url }}">{{ migration_url }}</a>
            <i id="copy-migration-url-button" class="fa-regular ml-3 fa-copy fa-xl opacity-60 hover:opacity-100 cursor-pointer" alt="Copy to clipboard"></i>
            </span>
        </div>
    </p>
</div>

{% endif %}
