<div class="pass-meter {{masterClass}}" off-click="matchBreakdown = false;">
	<div class="{{colClass}} pass-meter-col {{first}}">
		<div class="indicator"></div>
	</div>
	<div class="{{colClass}} pass-meter-col {{second}}">
		<div class="indicator"></div>
	</div>
	<div class="{{colClass}} pass-meter-col {{third}}">
		<div class="indicator"></div>
	</div>
	<div class="{{colClass}} pass-meter-col {{fourth}}">
		<div class="indicator"></div>
	</div>
	<div class="details" ng-click="toggleScore()">
		<span ng-show="!scoreShown">{{ 'details' | translate }}</span>
		<span ng-show="scoreShown">{{ 'hide.details' | translate}}</span>
	</div>
	<div class="pass-meter-message">{{message}}</div>
	<div class="detail_box" ng-show="scoreShown">
		<div class="row">
			<div class="col-xs-6">
				{{ 'password.score' | translate}}:
			</div>
			<div class="col-xs-6">
				{{score.score}}
			</div>
		</div>
		<div><b>{{ 'cracking.times' | translate}}</b></div>
		<div class="row">
			<div class="col-xs-6">
				{{ 'cracking.time.100h' | translate}}<br/>
				<small> {{ 'cracking.time.100h.desc' | translate}}</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.online_throttling_100_per_hour}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				{{ 'cracking.time.10s' | translate}}<br/>
				<small>{{ 'cracking.time.10s.desc' | translate}}</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.online_no_throttling_10_per_second}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				{{ 'cracking.time.10ks' | translate}}<br/>
				<small>{{ 'cracking.time.10ks.desc' | translate}}</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.offline_slow_hashing_1e4_per_second}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				{{ 'cracking.time.10Bs' | translate}}<br/>
				<small>{{ 'cracking.time.10Bs.desc' | translate}}</small>
			</div>
			<div class="col-xs-6">
				{{score.crack_times_display.offline_fast_hashing_1e10_per_second}}
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				{{ 'match.sequence' | translate}}:
			</div>
			<div class="col-xs-6">
				<span class="link" ng-click="toggleMatchBreakdown()">{{ 'match.sequence.link' | translate}}</span>
			</div>
		</div>
	</div>
</div>

<div class="match-sequence">
	<div class="sequence_container" ng-style="{'width': score.sequence.length * 210 }">
		<div class="sequence" ng-repeat="sequence in score.sequence">

			<table>
				<tr>
					<td colspan="2" class="token">
						<code>{{sequence.token}}</code>
					</td>
				</tr>
				<tr ng-if="sequence.pattern">
					<td>{{ 'pattern' | translate}}</td>
					<td>{{sequence.pattern}}</td>
				</tr>
				<tr ng-if="sequence.matched_word">
					<td>{{ 'matched.word' | translate}}</td>
					<td>{{sequence.matched_word}}</td>
				</tr>
				<tr ng-if="sequence.dictionary_name">
					<td>{{ 'dictionary.name' | translate}}</td>
					<td>{{sequence.dictionary_name}}</td>
				</tr>
				<tr ng-if="sequence.rank">
					<td>{{ 'rank' | translate}}</td>
					<td>{{sequence.rank}}</td>
				</tr>
				<tr ng-if="sequence.reversed">
					<td>{{ 'reversed' | translate}}</td>
					<td>{{sequence.reversed}}</td>
				</tr>
				<tr ng-if="sequence.guesses">
					<td>{{ 'guesses' | translate}}</td>
					<td>{{sequence.guesses}}</td>
				</tr>
				<tr ng-if="sequence.base_guesses">
					<td>{{ 'base.guesses' | translate}}</td>
					<td>{{sequence.base_guesses}}</td>
				</tr>
				<tr ng-if="sequence.uppercase_variations">
					<td>{{ 'uppercase.variations' | translate}}</td>
					<td>{{sequence.uppercase_variations}}</td>
				</tr>

				<tr ng-if="sequence.l33t_variations">
					<td>{{ 'leet.variations' | translate}}</td>
					<td>
						{{sequence.l33t_variations}}
					</td>
				</tr>
			</table>

		</div>
	</div>
</div>