<ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li class="active">Job {{job.id}}</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>
        Job {{job.id}} <small>{{job.started}}-{{job.finished}}: {{job.status}}</small>
    </h2>
    <pre style="display:{{show_yaml?'block':'none'}}">{{job_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>{{job.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>{{job.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>{{job.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>{{job.queued_count}}</strong> pages queued
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <h3>Sites</h3>
            <div class="col-sm-6 col-md-4" ng-repeat="site in sites">
                <a class="thumbnail" href="/sites/{{site.id}}">
                    <img style="width:300px;height:190px" src="{{config.WAYBACK_BASEURL}}/3/thumbnail:{{site.seed}}" alt="thumb">
                    <div class="caption">
                        <h5>{{site.seed}}</h5>
                        <!--
            <div><span class="glyphicon glyphicon-file"></span> <strong>{{site.page_count}}</strong> pages crawled</div>
            <div><span class="glyphicon glyphicon-duplicate"></span> <strong>{{site.stats.total.urls}}</strong> urls crawled</div>
            <div><span class="glyphicon glyphicon-oil"></span> <strong>{{site.stats.total.wire_bytes | byteformat}}</strong> crawled</div>
            <div><span class="glyphicon glyphicon-menu-hamburger"></span> <strong>{{site.queued_count}}</strong> pages queued</div>
            -->

                        <ul class="fa-ul">
                            <li><span class="fa fa-li fa-file-text"></span> <strong>{{site.page_count}}</strong> pages crawled</li>
                            <li><span class="fa fa-li fa-clone"></span> <strong>{{site.stats.total.urls}}</strong> urls crawled</li>
                            <li><span class="fa fa-li fa-archive"></span> <strong>{{site.stats.total.wire_bytes | byteformat}}</strong> crawled</li>
                            <li><span class="fa fa-li fa-ellipsis-h"></span> <strong>{{site.queued_count}}</strong> pages queued</li>
                        </ul>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

