<div class="card">
    {{ avatar }}
    <div class="info">
        {% if dehydrated %}
            <div class="name">Dehydrated device</div>
        {% else %}
            <div class="name">
                <span>
                    {% if let Some(display_name) = display_name %}
                        {{ display_name }}
                    {% else %}
                        Unknown device
                    {% endif %}
                </span>
                {% if style == DeviceCardStyle::Detailed %}
                    <span class="id">
                        <span class="mobile-hidden">•</span>
                        <ul class="bullet-separated">
                            <li>{{ device_id }}</li>
                            <li>
                                {% if let Some(metadata) = oauth_metadata %}
                                    <a href="{{ metadata.client_uri }}">Client website</a>
                                {% else %}
                                    legacy
                                {% endif %}
                            </li>
                        </span>
                    </span>
                {% endif %}
            </div>
            <div>
                Last active: {{ last_active }}
            </div>
            <div>
            {% if style != DeviceCardStyle::Detailed %}
                <a href="{{ crate::ROUTE_PREFIX }}/account/device/{{ device_id }}/">Details</a>
            {% endif %}
            </div>
        {% endif %}
    </div>
</div>
