{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}

{{ banner | default("") | safe }}

<form id="search-form">
    <div class="input-group mt-3 mb-3">
        <input id="search-text" type="text" class="form-control" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="submit">Search</button>
        </div>
    </div>
</form>

<h2 class="mt-3">
    <a class="btn btn-outline-success" href="{{ url_for('ui_create_get_environment') }}" role="button">
        <ion-icon style="line-height: 50%" name="add-outline"></ion-icon>
    </a>
    Environments
</h2>

{% for environment in environments %}
<div class="card my-2">
    <div class="card-body">
        <h5 class="card-title">
            <a href="{{ url_for('ui_get_environment', namespace=environment.namespace.name, environment_name=environment.name) }}">{{ environment.namespace.name }} / <span class="badge badge-info">{{ environment.name }}</span></a>
            <span class="badge badge-light">{{ (environment.current_build.size or 0) | filesizeformat(true) }}</span>
        </h5>
        {% if environment.current_build.has_yaml %}
        <a class="card-link" href="{{ url_for('api_get_build_yaml', build_id=environment.current_build_id) }}"><ion-icon name="code-download"></ion-icon> YAML</a>
        {% endif %}
        {% if environment.current_build.has_lockfile %}
        <a class="card-link" href="{{ url_for('api_get_build_lockfile', build_id=environment.current_build_id) }}"><ion-icon name="lock-closed-outline"></ion-icon> Lockfile</a>
        {% endif %}
        {% if environment.current_build.has_conda_pack %}
        <a class="card-link" href="{{ url_for('api_get_build_archive', build_id=environment.current_build_id) }}"><ion-icon name="archive-outline"></ion-icon> Archive</a>
        {% endif %}
        {% if environment.current_build.has_docker_manifest %}
        <a class="card-link" onclick="setClipboard('{{ registry_external_url }}/{{ environment.namespace.name }}/{{ environment.name }}:{{ environment.current_build.build_key }}')" role="button" data-toggle="popover" data-trigger="hover focus" data-content="Click to copy!"><ion-icon name="logo-docker"></ion-icon> Docker</a>
        {% endif %}
    </div>
</div>
{% endfor %}

<script>
 function setClipboard(value) {
     var tempInput = document.createElement("input");
     tempInput.style = "position: absolute; left: -1000px; top: -1000px";
     tempInput.value = value;
     document.body.appendChild(tempInput);
     tempInput.select();
     document.execCommand("copy");
     document.body.removeChild(tempInput);
 }

 function searchHandler(event) {
     event.preventDefault();
     let search = document.querySelector("#search-text");
     window.location.href = `?search=${search.value}`;
 }
 let form = document.querySelector("#search-form");
 form.addEventListener("submit", searchHandler);
</script>
{% endblock %}
