{% for model in app.models %}
    {% if model.name == name %}
        <div class="model-wrapper">
            <a class="model-tile" href="{{ model.admin_url }}"{% if model.admin_url in request.path|urlencode %} aria-current="page"{% endif %}>{{ model.name }}</a>
            {% if text %}
                    <div class="hidden-model-tooltip">
                      <div class="tooltipArrow"></div>
                        {{ text }}
                    </div>
            {% endif %}
        </div>
    {% endif %}
{% endfor %}


{% block extrastyle %}
<style>

    .model-tile {
        color: var(--admin-interface-generic-link-color) !important;
        font-weight: bold;
        line-height: 40px;
        display: inline-block;
        height: 40px;
        width: 200px;
        text-align: center;
        background: rgba(10, 10, 10, 0.1);
        text-decoration: none;

        box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
    }

    .model-tile:hover {
        background: rgba(0, 88, 156, 0.8);
        /*text-shadow: 2px 2px 5px #00589C;*/
        text-shadow: 2px 2px 5px lightblue;
        color: var(--admin-interface-module-text-color) !important;
    }

    .hidden-model-tooltip {
        display: none;
        position: absolute;
        top: -20px;
        height: 60px;
        width: 400px;
        left: 214px;
        border: 1px solid #00589C;
        border-radius: 3px;
        padding: 10px !important;
        font-style: italic;
        background: rgba(0, 88, 156, 0.8);
        z-index: 2;
        box-shadow: 2px 2px 2px lightgray;
        color: white !important;
    }

    .model-tile:hover + .hidden-model-tooltip {
      display: inline-block;
    }

    .model-wrapper {
        display: inline-block;
        position: relative;
        height: 40px;
        width: 200px;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .tooltipArrow::before,
    .tooltipArrow::after {
      content: "";
      border-width: 9px;
      margin: 34px -8px;
      border-style: solid;
      position: absolute;
      border-left: 0;
    }

    .tooltipArrow::before {
      border-color: #00589C;
      top: -4px;
      left: -1px;
    }

    .tooltipArrow::after {
      border-color: #fff transparent;
      top: -4px;
      left: -2px;
    }

</style>
{% endblock %}