<div style="height: 100%; width: 100%; display:flex; flex-direction: column;">
    <div class="horizontalPaddingBox" style="flex-grow: 0!important;">
        <div style="width: 100%; display: flex; flex-direction: row;">
            <div class="elidedText" style="display: block; flex: 1 1 auto;">
                <span class="primaryText" style="font-size: var(--big-text-size);">{{.Subject}}</span></br></br>
                <span class="primaryText"><span class="noselect">From: </span>{{.From}}</span></br>
                <span class="secondaryText"><span class="noselect">To: </span>{{.To}}</span></br>
            </div>
            <img id="readIcon{{.MailId}}" class="iconBtn" style="width: 20px; margin-right: 10px;" onclick="toggleRead('{{.MailId}}');" src="/assets/read.svg"/>
            <img id="restoreIcon" class="iconBtn" style="display:{{if .Trash}}block{{else}}none{{end}}; width: 20px; margin-right: 10px;" onclick="restoreMail({{.MailId}}, closeDetails);" src="/assets/restore.svg"/>
            <img id="deleteIcon" class="iconBtn" style="width: 20px; margin-right: 10px;" onclick="removeMail({{.MailId}}, closeDetails);" src="/assets/remove.svg"/>
            <img class="iconBtn" style="width: 20px; height: 20px; margin-left:10px;" onclick="closeDetails();" src="/assets/back.svg"/>
        </div>
        {{if len .Attachments}}
        <div class="noselect" style="width: 100%; display: flex; flex-direction: row;">
            <img id="attachementIcon" style="width: 20px; height: 20px; margin-top: auto; margin-bottom: auto; margin-right: 5px;" src="/assets/attachments.svg"/>
            {{range .Attachments}}
                <div class="attachment" onclick="downloadAttachment({{.Id}}, {{.FileName}})">{{.FileName}}</div>
            {{end}}
        </div>
        {{end}}
    </div>
    <div id="mailBody" class="contentArea horizontalPaddingBox">
        <div style="position: relative; max-width: 100%; max-height: 100%; width: 100%; height: 100%;">
            <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto;">
                <div>{{.Text}}</div>
            </div>
        </div>
    </div>
</div>