<div class="alert alert-danger" data-ng-show="flashMessage">
  {{$root.flashMessage}}
</div>
<div data-ng-include src="'views/includes/connection.html'"></div>
<section data-ng-controller="IndexController" data-ng-init="index()">
  <div class="container">
    <div id="home" class="row">
      <div class="col-xs-12 col-md-8">

        <div id="search-form-mobile" class="visible-xs" data-ng-include src="'views/includes/search.html'"></div>

        <h1 translate>Latest Blocks</h1>
        <table class="table table-hover table-striped" style="table-layout: fixed">
          <thead>
            <tr>
              <th translate>Height</th>
              <th translate>Age</th>
              <th class="text-right"><span class="ellipsis" translate>Transactions</span></th>
              <th class="text-right hidden-xs"><span class="ellipsis" translate>Mined by</span></th>
              <th class="text-right" translate>Size</th>
            </tr>
          </thead>
          <tbody>
          <tr data-ng-show="!blocks.length"><td colspan="4" translate>Waiting for blocks...</td></tr>
          <tr class="fader" data-ng-repeat='b in blocks'>
            <td>
              <a href="block/{{b.hash}}">{{b.height}}</a>
            </td>
            <td><span class="ellipsis">{{humanSince(b.time)}}</span></td>
            <td class="text-right">{{b.txlength}}</td>
            <td class="text-right hidden-xs"><a href="{{b.poolInfo.url}}" title="{{b.poolInfo.poolName}}" target="_blank" data-ng-show="b.poolInfo">{{b.poolInfo.poolName}}</a></td>
            <td class="text-right">{{b.size}}</td>
          </tr>
          </tbody>
        </table>
        <div class="btn-more">
          <a href="blocks" class="btn btn-default" translate>See all blocks</a>
        </div>

        <h2 translate>Latest Transactions</h2>

        <table class="table table-hover table-striped" style="table-layout: fixed;">
          <thead>
            <tr>
              <th>Hash</th>
              <th class="text-right" translate>Value Out</th>
            </tr>
          </thead>
          <tbody>
          <tr data-ng-show="!txs.length"><td colspan="3" translate>Waiting for transactions...</td></tr>
          <tr class="fader" data-ng-repeat='tx in txs'>
            <td>
              <a class="ellipsis" href="tx/{{tx.txid}}">{{tx.txid}}</a>
            </td>
            <td class="text-right"><span class="ellipsis">{{$root.currency.getConvertion(tx.valueOut) || tx.valueOut + ' BTC'}}</span></td>
          </tr>
          </tbody>
        </table>

      </div>

      <div class="col-xs-12 col-md-4 col-gray">
        <h2 translate>About</h2>
        <p translate><strong>insight</strong>  is an <a href="https://insight.is/"
          target="_blank">open-source Bitcoin blockchain explorer</a> with complete REST and websocket APIs that can be used for writing web wallets and other apps  that need more advanced blockchain queries than provided by bitcoind RPC.  Check out the <a href="https://github.com/bitpay/insight-ui" target="_blank">source code</a>.</p>
        <p translate><strong>insight</strong> is still in development, so be sure to report any bugs and provide feedback for improvement at our <a href="https://github.com/bitpay/insight-ui/issues" target="_blank">github issue tracker</a>.</p>
        <div id="powered" class="row">
          <div class="powered-text">
            <small class="text-muted" translate>Powered by</small>
          </div>
          <a href="http://bitcore.io" target="_blank" class="bitcore" title="Bitcore"></a>
          <a href="http://angularjs.org" target="_blank" class="angularjs" title="AngularJS"></a>
          <a href="https://code.google.com/p/leveldb/" target="_blank" class="leveldb" title="LevelDB"></a>
          <a href="http://nodejs.org" target="_blank" class="nodejs" title="NodeJs"></a>
        </div>
      </div> <!-- END OF COL-3 -->
    </div>
  </div>
</section>
