<section class="content-header">
    <h1>
        Data Breach Report
        <small>have you been pwned?</small>
    </h1>
</section>
<section class="content">
    <div ng-show="loading && !breachAccounts.length">
        <p>Loading...</p>
    </div>
    <div ng-show="!loading && error">
        <p>An error occurred trying to load the report. Try again...</p>
    </div>
    <div class="callout callout-danger" ng-show="!error && !loading && breachAccounts.length">
        <h4><i class="fa fa-frown-o"></i> Oh No, Data Breaches Found!</h4>
        <p>
            Your email ({{email}}) was found in {{breachAccounts.length}}
            <span ng-if="breachAccounts.length > 1">different</span> data
            <span ng-pluralize count="breachAccounts.length" when="{'1': 'breach', 'other': 'breaches'}"></span>
            online.
        </p>
        <p>
            A "breach" is an incident where a site's data has been illegally accessed by hackers and then released publicly.
            Review the types of data that were compromised (email addresses, passwords, credit cards etc.) and take appropriate
            action, such as changing passwords.
        </p>
        <a href="https://haveibeenpwned.com" rel="noopener" target="_blank" class="btn btn-default btn-flat">Check another email</a>
    </div>
    <div class="callout callout-success" ng-show="!error && !loading && !breachAccounts.length">
        <h4><i class="fa fa-smile-o"></i> Good News, Nothing Found!</h4>
        <p>Your email ({{email}}) was not found in any known data breaches.</p>
        <a href="https://haveibeenpwned.com" rel="noopener" target="_blank" class="btn btn-default btn-flat">Check another email</a>
    </div>
    <div class="box box-danger" ng-repeat="breach in breachAccounts track by breach.id">
        <div class="box-header with-border">
            <h3 class="box-title">{{breach.title}}</h3>
        </div>
        <div class="box-body box-breach">
            <div class="row">
                <div class="col-sm-2">
                    <img ng-src="{{breach.image}}" alt="{{breach.id}} logo" class="img-responsive" />
                </div>
                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-sm-8">
                            <p ng-bind-html="breach.description"></p>
                            <h5><b>Compromised Data</b></h5>
                            <ul>
                                <li ng-repeat="class in breach.classes">{{class}}</li>
                            </ul>
                        </div>
                        <div class="col-sm-4">
                            <dl>
                                <dt><span class="hidden-sm">Website</dt>
                                <dd>{{breach.domain}}</dd>
                                <dt><span class="hidden-sm">Affected </span>Users</dt>
                                <dd>{{breach.count | number: 0}}</dd>
                                <dt><span class="hidden-sm">Breach </span>Occurred</dt>
                                <dd>{{breach.date | date: format: mediumDate}}</dd>
                                <dt><span class="hidden-sm">Breach </span>Reported</dt>
                                <dd>{{breach.reportedDate | date: format: mediumDate}}</dd>
                                <dt><span class="hidden-sm">Information </span>Updated</dt>
                                <dd>{{breach.modifiedDate | date: format: mediumDate}}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    This data is brought to you as a service from
    <b><a href="https://haveibeenpwned.com/" target="_blank" rel="noopener">Have I been pwned?</a></b>.
    Please check out their wonderful services and subscribe to receive notifications about future data breaches.
</section>
