rycus86/demo-site

<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--4-col mdl-cell--top dockerhub" id="dockerhub-{{ data.name }}">

    <div class="mdl-card__title mdl-card--border">
        <h2 class="mdl-card__title-text">{{ data.name }}</h2>
    </div>

    <div class="mdl-card__supporting-text">
        <p>
            <span id="dockerhub-time-pushed-{{ data.name }}" class="mdl-chip mdl-chip--contact">
                <i class="mdl-chip__contact material-icons">history</i>
                <span class="mdl-chip__text momentjs-time" data-time="{{ data.last_updated }}" data-prefix="pushed">
                    {{ data.last_updated }}
                </span>
            </span>
        </p>
        <p>
            {{ data.description }}
        </p>

        <div class="mdl-tooltip mdl-tooltip--bottom" data-mdl-for="dockerhub-time-pushed-{{ data.name }}" data-datetime="{{ data.last_updated }}">
            {{ data.last_updated }}
        </div>
    </div>

    <div class="mdl-card__title mdl-card--border">Tags</div>
    <div class="mdl-card__supporting-text" id="dockerhub-tags-{{ data.name }}">
        <div class="loading-panel">
            <div class="mdl-spinner mdl-js-spinner is-active"></div>
            <div class="loading-text"><i>Loading tags...</i></div>
        </div>
    </div>

    <div class="mdl-card__title mdl-card--border">README</div>
    <div class="mdl-card__supporting-text">
        <div class="readme markdown">
            {% if data.full_description %}
                {{ markdown(data.full_description)|safe }}
            {% else %}
            <p>
                <i>None</i>
            </p>
            {% endif %}
        </div>
    </div>

    <div class="mdl-card__actions mdl-card--border card-actions-light">
        <a href="https://hub.docker.com/r/{{ data.namespace }}/{{ data.name }}/">
            <span class="mdl-chip mdl-chip--contact">
                <i class="mdl-chip__contact material-icons">public</i>

                <span class="mdl-chip__text">
                    {{ data.namespace }}/{{ data.name }}
                </span>
            </span>
        </a>
    </div>

</div>

<script>
    cApp.DateTime.formatTimeFromNow('dockerhub-{{ data.name }}');
    cApp.DateTime.formatDateTime('dockerhub-{{ data.name }}');
    cApp.DockerHub.generateTags('{{ data.namespace }}/{{ data.name }}', 'dockerhub-tags-{{ data.name }}');

    $('#dockerhub-{{ data.name }} .mdl-tooltip').each(function (idx, item) {
        componentHandler.upgradeElement(item);
    });
</script>