account_overview.jinja2

{% extends "sitebase.jinja2" %}
{% set page_title = _("Account") %}
{% set show_breadcrumbs = True %}
{% block head %}
<script src="/static/vendor/js/jquery-3.4.1.min.js"></script>
<script src="/static/vendor/js/jquery.validate.min.js"></script>

<style>

.card-img {
    height:46px;
    width: auto;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 700;
}

.center-text {
  text-align: center;
}

.info-col {
  min-width: 277.5px;
}
.info-card {
  border: solid 1px #e5e5e5;
  background-color: #eceeef;
  min-width: 200px;
}

.source-card {
  min-width: 200px;
}

#new-source-title {
  text-align: center;
}

</style>
{% endblock %}
{% block breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">{{ _('Dashboard') }}</li>
{% endblock %}
{% block content %}


<div class="container default-container">
    {% if sources|length > 0 %}
    <h2 class="account-h2">{{ _('Active Profiles') }}</h2>
    {% if non_human_sources %}
        <p class="tmi-tooltip">{{ _('Please note: animal and environmental profiles are currently unavailable.') }}</p>
    {% endif %}
    <div class="row mb-5">
        {% for source in sources %}
        <div class="col-md-4 mb-4">
            {% if source.alerts > 0 %}
                <div class="card card-profile-alerts">
                    <img src="/static/img/profile_card_icon.png" class="mx-auto card-profile-icon">
                    <h2 class="profile-card-h2 mx-auto mt-2 mb-3">{{ source.source_name|e}}</h2>
                    <div class="alert-updates mx-auto mb-3">
                        {% if source.alerts > 1 %}
                            {{ _('You have') }}&nbsp;<span class="orange-text">{{ source.alerts }}</span>&nbsp;{{ _('updates') }}
                        {% else %}
                            {{ _('You have') }}&nbsp;<span class="orange-text">{{ source.alerts }}</span>&nbsp;{{ _('update') }}
                        {% endif %}
                        <a class="btn btn-orange ms-4" style="width: fit-content;" href="/accounts/{{account.account_id}}/sources/{{ source.source_id|e }}">{{ _('View') }}</a>
                    </div>
                </div>
            {% else %}
                {% if source.source_type == "animal" %}
                <div class="card card-profile">
                    <img src="/static/img/source_animal.png" class="mx-auto card-profile-icon" width="70px">
                    <h2 class="profile-card-h2 mx-auto mt-2 mb-4" title="{{ source.source_name|e}}">{{ source.source_name|e}}</h2>
                    <a class="btn btn-blue-gradient mx-auto" style="width: fit-content; pointer-events: none;" href="#" disabled>
                        {{ _('Unavailable') }}
                    </a>
                </div>
                {% elif source.source_type == "environmental" %}
                <div class="card card-profile">
                    <img src="/static/img/source_environmental.png" class="mx-auto card-profile-icon" width="70px">
                    <h2 class="profile-card-h2 mx-auto mt-2 mb-4" title="{{ source.source_name|e}}">{{ source.source_name|e}}</h2>
                    <a class="btn btn-blue-gradient mx-auto" style="width: fit-content; pointer-events: none;" href="#" disabled>
                        {{ _('Unavailable') }}
                    </a>
                </div>
                {% else %}
                <div class="card card-profile">
                    <img src="/static/img/profile_card_icon.png" class="mx-auto card-profile-icon">
                    <h2 class="profile-card-h2 mx-auto mt-2 mb-4" title="{{ source.source_name|e}}">{{ source.source_name|e}}</h2>
                    <a class="btn btn-blue-gradient mx-auto" style="width: fit-content;" href="/accounts/{{account.account_id}}/sources/{{ source.source_id|e }}">
                        {{ _('Go to My Profile') }}
                    </a>
                </div>
                {% endif %}
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}
    <h2 class="account-h2">{{ _('Add New Profile') }}</h2>
    <p class="tmi-content">{{ _('Select the type of profile you would like to create.') }}</p>
    <div class="card" id="human-source">
        <img src="/static/img/source_human.png" class="card-img-top card-img mx-auto mt-3" alt="..."/>
        <div class="card-body center-text">
            <h2 class="center-text">{{ _('Human Profile') }}</h2>
            <p class="center-text tmi-content">{{ _('Share your diet, health, and lifestyle details to help discover more about how this affects the human microbiome.') }}</p>
            <a class="btn btn-blue-gradient btn-lg" href="/accounts/{{ account.account_id }}/create_human_source" role="button">{{ _('Add Human Profile') }}</a>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-1">
            <img src="/static/img/source_animal.png" class="card-img-top card-img mx-auto my-3" alt="..."/>
        </div>
        <div class="col-md-5">
            <h3 class="disabled-source-types">{{ _('Pet Profile') }}</h3>
            <p class="small-text disabled-source-types">{{ _('Share sample(s) from an animal (e.g. fecal, saliva, skin, etc.)') }}</p>
            <p class="disabled-source-types"><strong>{{ _('Coming Soon') }}</strong></p>
        </div>
        <div class="col-md-1">
            <img src="/static/img/source_environmental.png" class="card-img-top card-img mx-auto my-3" alt="..."/>
        </div>
        <div class="col-md-5">
            <h3 class="disabled-source-types">{{ _('Environment Profile') }}</h3>
            <p class="small-text disabled-source-types">{{ _('Share sample(s) from the environment (e.g. kitchen counter, food, etc.)') }}</p>
            <p class="disabled-source-types"><strong>{{ _('Coming Soon') }}</strong></p>
        </div>
    </div>
    {% if admin_mode %}
    <div class="row mt-3">
        <div class="col-12">
            <center><h2><a href="/accounts/{{ account.account_id }}/details">{{ _('Account Details') }}</a></h2></center>
        </div>
    </div>
    {% endif %}
</div>


{% endblock %}