{% load edc_dashboard_extras %}
{% load effect_ae_extras %}
{% load tz %}
{% load static %}
{% load l10n %}

<style>
    div.ae_description {
        max-width: 70vw;
        min-width: 400px;
        overflow-x: auto; /* Adds a scrollbar if the content is even longer than the container */
        display: inline-block; /* Ensures the div respects the width of the content */
        padding-right: 30px;
        -webkit-overflow-scrolling: touch;
    }
    /* Adjustments for larger screens */
    @media (min-width: 768px) {
        div.ae_description {
            min-width: 450px;
            max-width: 70vw;
        }
    }
</style>

<div class="ae_description">
<B>{{ ae_initial.subject_identifier }}</B>
<BR><b>Reported:</b> {{ ae_initial.report_datetime|date|date:SHORT_DATE_FORMAT}} ({{ utc_date|timeuntil:ae_initial.report_datetime.date }} ago)
<BR><b>Site aware:</b> {{ ae_initial.ae_awareness_date|date:SHORT_DATE_FORMAT }}
<BR><b>Grade:</b> {{ ae_initial.get_ae_grade_display }}
<BR><b>Classification:</b>
{% if ae_initial.ae_classification.name == OTHER %}
	Other: {{ ae_initial.ae_classification_other }}
{% else %}
	{{ ae_initial.ae_classification.display_name }}
{% endif %}
<BR><b>SAE:</b> {{ ae_initial.get_sae_display }}
{% if ae_initial.sae == YES %}
	<BR><b>SAE Reason:</b> {{ sae_reason|default:ae_initial.sae_reason.display_name }}
{% endif %}
<BR><b>Description:</b>
<BR>{{ ae_description|default:ae_initial.ae_description }}
</div>