<ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/jobs/{{site.job_id}}">Job {{site.job_id}}</a></li>
    <li class="active">{{site.seed}}</li>
</ol>

<div class="page-header">
    <h1>Brozzler
        <a href="/"><img src="/static/brozzler.svg" style="height:1.5em;float:right"></a>
    </h1>
</div>

<div>
    <h2 ng-click="show_yaml = !show_yaml">
        <span class="fa fa-caret-right"
            ng-class="{ 'fa-caret-right': !show_yaml, 'fa-caret-down': !!show_yaml }"></span>
        Site {{site.seed}} (Job <a href="/jobs/{{site.job_id}}">{{site.job_id}}</a>)
    </h2>
    <pre style="display:{{show_yaml?'block':'none'}}">{{site_yaml}}</pre>

    <div class="row bigstats">
        <div class="col-sm-6 col-md-3">
            <div class="stat">
                <span class="fa fa-file-text"></span> <strong>{{site.page_count}}</strong> pages crawled
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="stat">
                <span class="fa fa-clone"></span> <strong>{{site.stats.total.urls}}</strong> urls crawled
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="stat">
                <span class="fa fa-archive"></span> <strong>{{site.stats.total.wire_bytes | byteformat}}</strong> crawled
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="stat">
                <span class="fa fa-ellipsis-h"></span> <strong>{{site.queued_count}}</strong> pages queued
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <h2>Pages</h2>
            <div class="col-sm-6 col-md-4" ng-repeat="page in pages">
                <div class="thumbnail">
                    <img style="border:1px solid #ddd;width:300px;height:190px" src="{{config.WAYBACK_BASEURL}}/3/thumbnail:{{page.url}}" alt="thumb">
                    <div class="caption">
                        <h5>{{page.url}}</h5>
                        <ul class="fa-ul">
                            <li>
                            <span class="fa fa-li fa-camera"></span>
                            <a target="_blank" href="{{config.WAYBACK_BASEURL}}/3/screenshot:{{page.url}}">full size screenshot &gt;</a>
                            </li>
                            <li>
                            <span class="fa fa-li fa-university"></span>
                            <a target="_blank" href="{{config.WAYBACK_BASEURL}}/3/{{page.url}}">wayback &gt;</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12" ng-show="loading">
            <div style="text-align:center;font-size:300%">
                <span class="fa fa-spinner fa-pulse"></span>
            </div>
        </div>
    </div>

</div>
