+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="robots" content="noindex">
+ <title>Dmarc reports</title>
+ <link rel="stylesheet" href="default.css">
+</head>
+
+<body>
+ <div id="app" style="width: 100%">
+ <div class="optionblock" v-if="info">
+ <div class='options'>
+ <span class='optionlabel'>Hide all-green lines:</span>
+ <label><input type="radio" :value="false" v-model="filterGreen"> no</label>
+ <label><input type="radio" :value="true" v-model="filterGreen"> yes</label>
+ </div>
+ <div class='options'>
+ <span class='optionlabel'>Sort order:</span>
+ <label><input type="radio" :value="false" v-model="reverse"> ascending</label>
+ <label><input type="radio" :value="true" v-model="reverse"> descending</label>
+ </div>
+ <div class='options'>
+ <span class='optionlabel'>Domain(s):</span>
+ <select v-model="filterDomain">
+ <option selected="selected" :value="null">[all]</option>
+ <option v-for="domain in info.domains" :value="domain">{{ domain }}</option>
+ </select>
+ </div>
+ <div class='options'>
+ <span class='optionlabel'>Organisation(s):</span>
+ <select v-model="filterOrg">
+ <option selected="selected" :value="null">[all]</option>
+ <option v-for="org in info.orgs" :value="org">{{ org }}</option>
+ </select>
+ </div>
+ <div class='options'>
+ <span class='optionlabel'>Time:</span>
+ <select v-model="filterDate">
+ <option selected="selected" :value="null">[all]</option>
+ <option v-for="date in info.dates" :value="date">{{ date }}</option>
+ </select>
+ </div>
+ </div>
+
+ <h1 class='main'>DMARC Reports</h1>
+ <table class='reportlist' v-if="summaries">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Start Date</th>
+ <th>End Date</th>
+ <th>Domain</th>
+ <th>Reporting Organization</th>
+ <th>Report ID</th>
+ <th>Messages</th>
+ </tr>
+ </thead>
+ <tbody>
+ <template v-for="summary in filtered()">
+ <tr v-on:click="toggle(summary)" class="summaryrow"
+ v-bind:class="[{ selected: selectedSummary && summary.serial === selectedSummary.serial }]">
+ <td class='right'><span :class="'circle_' + getColor(summary)"></span></td>
+ <td class='right'>{{ printDate(summary.mindate) }}</td>
+ <td class='right'>{{ printDate(summary.maxdate) }}</td>
+ <td class='center'>{{ summary.domain }}</td>
+ <td class='center'>{{ summary.org }}</td>
+ <td class='center'>{{ summary.reportid }}</td>
+ <td class='center'>{{ summary.rcount }}</td>
+ </tr>
+ <tr v-if="selectedSummary && summary.serial === selectedSummary.serial">
+ <td colspan="6" class="reportcell">
+ <div class='center reportdesc'>
+ <p>Policies: adkim={{ summary.policy_adkim }}, aspf={{ summary.policy_aspf }}, p={{ summary.policy_none }}, sp={{ summary.policy_sp }}, pct={{ summary.policy_pct }}</p>
+ </div>
+ <table v-if="summary.details" class='reportdata'>
+ <thead>
+ <tr>
+ <th>IP Address</th>
+ <th>Host Name</th>
+ <th>Message Count</th>
+ <th>Disposition</th>
+ <th>Reason</th>
+ <th>DKIM Domain</th>
+ <th>Raw DKIM Result</th>
+ <th>SPF Domain</th>
+ <th>Raw SPF Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="record in summary.details.rptrecord" :class='getColor(record)'>
+ <td>{{ record.ip }}</td>
+ <td>{{ record.host }}</td>
+ <td>{{ record.rcount }}</td>
+ <td>{{ record.disposition }}</td>
+ <td>{{ record.reason }}</td>
+ <td>{{ record.dkimdomain }}</td>
+ <td>{{ record.dkimresult }}</td>
+ <td>{{ record.spfdomain }}</td>
+ <td>{{ record.spfresult }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td></td>
+ </tr>
+ </template>
+ </tbody>
+ </table>
+ </div>
+
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+ <script src="app.js"></script>
+</body>
+
+</html>