<!DOCTYPE html>
<html lang="en" ng-app="RoaringAppsMac">
<head>
	<title>RoaringApps</title>
	
	<meta charset="utf-8">
	
	<link rel="stylesheet" href="css/site-2016.css" />
	 <!-- LiveReload for dev -->
	<!--<script src="http://10.0.0.42.xip.io:1339/livereload.js?snipver=1"></script>-->
	<!--<link rel="stylesheet" href="http://roaringapps-mac.10.0.0.42.xip.io:8080/css/site-2016.css" />-->
	
	
	<!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
	0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
	for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
	mixpanel.init("2c2ff3b9d8f6315c8d35d2c157f3a7ce");</script><!-- end Mixpanel -->
</head>
<body class="window-{{ state.windowFocus }} apps-view-Overview">
    
	<div id="container" ng-controller="MainCtrl" class="{{state.validBeta ? '' : 'expired'}} {{ (state.newerAppVersionAvailable && appUpgrade.dismissed.indexOf(state.newerAppVersionAvailable) === -1) ? 'upgrade-available' : '' }}" ng-keyup="keyPress($event)" ng-cloak>
	
		<div id="expired-beta-splash" ng-show="!state.validBeta">
					
			<div class="ra-circle-logo"></div>
			
			<h2>Expired Beta</h2>
			<p class="beta-is-superseded">This beta has expired. Please download the latest version of the application from the RoaringApps website.</p>
			<p class="beta-is-expired" style="display: none;">Beta testing has finished. Please download the final version of the application from RoaringApps.com or the Mac App Store.</p>
			
		</div>
		
		<div class="version-upgrade-banner">
			<p>A new version of RoaringApps for your Mac ({{ state.newerAppVersionAvailable }}) is now available! <span class="btn btn-blue" ng-click="openBrowser('https://roaringapps.com/mac-app')">Download it now</span> <span class="upgrade-close-btn" ng-click="appUpgrade.dismiss()">&times;</span></p>
		</div>
		
		<div class="modal-backdrop {{ modal.in ? 'in' : 'out' }}"></div>
					
		<!-- Preferences modal -->
		<div class="modal preferences-modal {{ modal.preferences ? 'in' : 'out' }} {{ 'show-screen-' + account.state.modalScreen }}">
				
			<div class="modal-header">
				<h2>Preferences</h2>
				<span class="modal-close-btn" ng-click="account.closeModal()"></span>
				<span class="btn modal-back-btn" ng-click="account.state.modalScreen = 1">&larr; Back</span>
			</div>
			
			<div  ng-show="!account.user">
				<p>Sign in to manage your preferences.</p>
			</div>
			
			<div ng-show="account.user">
			
				<div class="modal-screen screen-1">
				
					<form name="preferencesForm" ng-submit="account.savePreferences(preferencesForm.$valid)" novalidate>
						<div class="form-group checkbox-group">
							<h4>Save to RoaringApps</h4>
							<label for="pref-upload"><input type="checkbox" name="upload" id="pref-upload" value="true" ng-model="account.preferencesForm.upload" ng-change="account.savePreferences()" /> Upload a list of installed applications to my RoaringApps account.</label>
							<div class="hint">
								<p>You will be able to access the compatibility of your installed apps from the RoaringApps website.</p>
							</div>
						</div>
						<div class="form-group checkbox-group">
							<h4>Profile page</h4>
							<label for="pref-private"><input type="radio" name="visibility" id="pref-private" value="private" ng-model="account.preferencesForm.visibility" ng-change="account.savePreferences()" /> <strong>Public</strong> share my favourites <span ng-show="account.preferencesForm.upload">&amp; installed applications</span>.</label>
							<label for="pref-public"><input type="radio" name="visibility" id="pref-public" value="public" ng-model="account.preferencesForm.visibility" ng-change="account.savePreferences()" /> <strong>Private</strong> keep my favourites <span ng-show="account.preferencesForm.upload">&amp; installed applications </span>private.</label>
							
							<div class="hint">
								<p><button ng-click="$event.preventDefault();account.visitProfilePage()">View your profile page</button></p>
							</div>
						</div>
						
						<div class="form-group text-left" ng-if="account.user && account.user.installed">
							<h4>Installed applications</h4>
							<p>You have uploaded your installed applications list from {{ objectSize(account.user.installed) === 1 ? 'one' : objectSize(account.user.installed) }}  Mac<span ng-show="objectSize(account.user.installed) > 1">s</span>.<br />
							<button ng-click="$event.preventDefault();account.state.modalScreen = 2">More details...</button></p>
							
						</div>
					</form>
				
				</div>
				
				<div class="modal-screen screen-2">
									
					<div class="form-group text-left" ng-if="account.user && account.user.installed">
						<h4>Installed applications</h4>
						<p>You have uploaded your list of installed applications from these Macs:</p>
						
						<div class="modal-inset">
							<ul>
								<li ng-repeat="m in account.user.installed" class="pref-list-item"><strong>{{ m.macName }}</strong> <span style="color: #888;">(uploaded {{ ago(m.lastFetch) }})</span> <span class="pref-list-remove" ng-click="account.removeInstalledApps(m.macName)">&times;</span></li>
							</ul>
						</div>
					</div>
				</div>
			
			</div>
			
		</div>
		
		<!-- Share experience modal -->
		<div class="modal info-modal experience-modal {{ modal.experience ? 'in' : 'out' }}">
										
				<div class="modal-header">
					
					<div class="icon-container">
					    <img src="" ng-src="{{experience.currentApp.icon}}" alt="{{experience.currentApp.name + 'icon'}}" class="app-icon" />
					</div>
					
					<h2>{{experience.currentApp.name}}</h2>
					<p class="sub">{{experience.currentApp.version}}</p>
					
					
				</div>
				
				<div class="modal-body">
					<p class="text-centre"><strong><em>Does it work for you?</em></strong></p>
					
					<ul class="new-compatibility-status-buttons">
						<li 
							ng-repeat="status in ['works-fine', 'some-problems', 'doesnt-work']"
							class="{{status}} {{experience.newStatusReport.status == status ? 'selected' : ''}}" 
							ng-click="experience.newStatusReport.status = status">
							
							<span class="icon status-report-icon s-{{status}}"></span>
								
						</li>
					</ul>
					
					<table class="modal-form">
						<tbody>
							<tr>
								<td><label for="new-compatibility-status-note-field">Note</label></td>
								<td><textarea class="new-compatibility-status-note-field" id="new-compatibility-status-note-field" ng-model="experience.newStatusReport.note" autoheight></textarea></td>
							</tr>
							<tr>
								<td><label>Summary</label></td>
								<td>{{ experience.summarySentence() }}</td>
							</tr>
						</tbody>
					</table>
					
					<p ng-show="!experience.state.loading">
						<span class="modal-error-msg" ng-show="experience.state.error">{{ experience.state.error }}</span>
					</p>
					
				</div> <!-- /.modal-body -->
				
				<div class="modal-footer">
					
					<div class="modal-loading-indicator">
						<p class="modal-loading" ng-show="experience.state.loading">
							<svg width='60px' height='60px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="60" height="60" fill="none" class="bk"></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(0 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(30 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(60 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(90 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(120 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(150 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(180 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(210 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(240 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(270 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(300 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(330 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
						</p>
					</div>
					
					<div class="modal-action-buttons" ng-hide="experience.state.loading">
						<button class="btn btn-secondary" ng-click="experience.closeModal()">Cancel</button>
						<button class="btn btn-primary" ng-click="experience.submit()" ng-disabled="experience.invalid()">Submit</button>
					</div>
				</div>
				
		</div> <!-- /.modal.experience-modal -->
		
		<!-- Sign in modal -->
		<div class="modal signin-modal {{ modal.signin ? 'in' : 'out' }} {{ account.state.error ? 'error' : '' }} {{ 'show-screen-' + account.state.modalScreen }}">
			
			<div class="modal-screen screen-1">
				
				<div class="modal-header">
					<h2>Sign in</h2>
				</div>
				
				<p class="text-centre">Sign in to your RoaringApps account to view favourites and share your list of installed applications.</p>
				<form name="signinForm" ng-submit="account.signin(signinForm.$valid)" novalidate>
					<div class="form-group">
						<input type="email" ng-model="account.form.email" placeholder="Email" required />
					</div>
					<div class="form-group">
						<input type="password" ng-model="account.form.password" placeholder="Password" required />
					</div>
					<p class="text-left" ng-show="!account.state.loading">
						<span class="modal-error-msg" ng-show="account.state.error">{{ account.state.error }}</span>
						<button style="float: right;" type="submit" class="btn" ng-disabled="signinForm.$invalid">Sign in</button>
					</p>
					<p class="modal-loading" ng-show="account.state.loading">
						<svg width='60px' height='60px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="60" height="60" fill="none" class="bk"></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(0 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(30 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(60 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(90 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(120 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(150 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(180 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(210 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(240 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(270 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(300 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect  x='47.5' y='44' width='5' height='12' rx='3' ry='3' fill='#000' transform='rotate(330 50 50) translate(0 -16)'>  <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
					</p>
					
				</form>
			
			</div>
			
			<div class="modal-screen screen-2">
			
				<div class="modal-header">
					<h2>Preferences</h2>
				</div>
				
				<form name="preferencesForm" ng-submit="account.savePreferences(preferencesForm.$valid);account.closeModal()" novalidate>
					<div class="form-group checkbox-group">
						<h4>Save to RoaringApps</h4>
						<label for="pref-upload"><input type="checkbox" name="upload" id="pref-upload" value="true" ng-model="account.preferencesForm.upload" /> Upload a list of installed applications to my RoaringApps account.</label>
						<div class="hint">
							<p>You will be able to access the compatibility of your installed apps from the RoaringApps website.</p>
						</div>
					</div>
					<div class="form-group checkbox-group">
						<h4>Profile page</h4>
						<label for="pref-private"><input type="radio" name="visibility" id="pref-private" value="private" ng-model="account.preferencesForm.visibility" /> <strong>Public</strong> share my favourites <span ng-show="account.preferencesForm.upload">&amp; installed </span>applications.</label>
						<label for="pref-public"><input type="radio" name="visibility" id="pref-public" value="public" ng-model="account.preferencesForm.visibility" /> <strong>Private</strong> keep my favourites <span ng-show="account.preferencesForm.upload">&amp; installed applications </span>private.</label>
					</div>
					<p class="text-centre" ng-show="!account.state.loading"><button type="submit" class="btn" ng-disabled="preferencesForm.$invalid">Save</button></p>
				</form>
			</div>
			
			<span class="modal-close-btn" ng-click="account.closeModal()"></span>
		
		</div>
	
		<section id="side" class="side" ng-hide="state.currentView == 'loading' || !state.validBeta">
			<div class="side-group">
				<h2>Directories <span class="dir-add" ng-click="addDirectory()">+</span></h2>
				<ul ng-repeat="dir in directories">
					<li class="user-dir"><span class="dir-path">{{dir}}</span><span class="dir-remove" ng-click="removeDirectory(dir)">×</span></li>
				</ul>	
				<p ng-if="!directories.length">Click the + icon to add app directories to search.</p>	
			</div>
			
			<div class="side-group stats">
				<h2>System Info</h2>
				<ul>
					<li><strong>Mac</strong> {{state.systemInfo.macModel}}</li>
					<li><strong>macOS</strong> {{state.systemInfo.osNumber}} <span ng-show="state.systemInfo.osName">({{state.systemInfo.osName}})</span></li>
					<li><strong>Name</strong> {{state.systemInfo.macName}}</li>
				</ul>
			</div>
			
			<div class="side-group" ng-show="apps.matched">
				<h2>Apps list <span class="side-h-action" ng-click="refresh()">Refresh</span></h2>
				<ul>
					<li id="last-fetch-date" ng-if="state.lastFetched"><strong>Last updated</strong> {{ state.lastFetchedStr }}</li>
					<li ng-if="state.fetchInProgress">Updating application data...</li>					
					<li ng-if="apps.matched.length && !state.fetchInProgress"><strong>Apps</strong> {{ apps.matched.length }}</li>			
					<li ng-if="apps.matched.length && apps.noMatch.length && !state.fetchInProgress"><strong>Unmatched apps</strong> {{ apps.noMatch.length }} <span class="side-h-action" ng-show="state.filters.noMatch == false" ng-click="state.filters.noMatch = !state.filters.noMatch">Show</span><span class="side-h-action" ng-show="state.filters.noMatch == true" ng-click="state.filters.noMatch = !state.filters.noMatch">Hide</span></li>	
				</ul>
				
				<progress id="progress-bar" ng-show="state.fetchInProgress"></progress>
			</div>
			
			<div class="side-group">
				<h2>Account <span class="side-h-action" ng-if="!account.user" ng-click="modal.open('signin')">Sign in</span> <span class="side-h-action" ng-if="account.user" ng-click="account.signout()">Sign out</span></h2>
				
				<div class="signed-in" ng-if="account.user">
					<ul>
						<li><strong>Username</strong> {{ account.user.username }}</li>
						<li><strong>Email</strong> {{ account.user.email }}</li>
					</ul>
				</div>
				<div class="signed-out" ng-if="!account.user">
				
				</div>
			</div>
						
			<!--
			<div class="side-group">
				<h2>Dev toggles</h2>
				<ul>
					<li><button ng-click="state.currentView = 'apps-overview'">Apps overview</button></li>
					<li><button ng-click="state.currentView = 'loading'">Loading</button></li>
					<li><button ng-click="state.currentView = 'landing'">Landing</button></li>
					
					<li><label><input type="checkbox" ng-model="settings.matchIndicators" /> Show match indicators</label></li>
				</ul>
			</div>
			-->
			
			<!--
			<div class="side-group">
				<h2>Debug info</h2>
				<ul>
					<li><button ng-click="debug.showLogFile()">Show log file</button></li>
				</ul>
			</div>
			-->
			
		</section>
		
		<section id="main" class="main">			
			
			<div id="view-landing" class="main-view-panel" ng-show="state.currentView == 'landing'">
				<!--<header><h1><span>RoaringApps</span></h1></header>-->
				
				<div class="landing-logo"></div>
				
				<p><button id="start-main" class="btn go" ng-click="fetchLocalApps()">Check Applications</button></p>
				<p>Or add your app directories in the sidebar</p>
				
				<!--
				<div class="onboard-box step-1">
					<div class="num">1</div>
					<p>Select directories where your applications are kept.</p>
				</div>
				
				<div class="onboard-box step-2">
					<div class="num">2</div>
					<p>Search for applications &amp; match them with the RoaringApps database.</p>
				</div>
				
				<div class="onboard-box step-3">
					<div class="num">3</div>
					<p>Sign in to access your favourite applications &amp; upload your installed apps.</p>
				</div>
				-->
			</div>
			
			<div id="view-loading" class="main-view-panel" ng-show="state.currentView == 'loading'">
				
				<progress id="progress-bar"></progress>
				 <span id="progress-description">{{ state.loadingMsg }}</span>
				 <!--
				 <p><button ng-click="debug.showLogFile()">Show log file</button></p>
				 -->
			</div>
			
			<div id="view-error" class="main-view-panel" ng-show="state.currentView == 'remote-error'">
				
				<h2>:(</h2>
				
				 <p>An error occurred getting compatibility data for your applications. I'm working on resolving this error!</p>
			</div>
			
			<div id="view-local-error" class="main-view-panel" ng-show="state.currentView == 'local-error'">
				
				<h2>:(</h2>
				
				<p>An error occurred getting the list of your installed applications. Check that you have selected your Applications directory in the sidebar, and try closing the app and starting again.</p>
				<p>If the problem persists, please <a href="#"  ng-click="openBrowser('https://roaringapps.com/contact')">let me know</a>.</p>
			</div>
						
			<div id="view-account-options" class="main-view-panel" style="display: none;">
				<div class="login-container">
					
					<img src="img/icon-mono.png" alt="RoaringApps" />
					
					<span class="login-back-btn">...</span>
										
					<h2>Save to RoaringApps?</h2>
					<h4>access your app compatibility anytime, anywhere</h4>
					<p>Would you like to save the list of your installed applications to RoaringApps? This will allow you to access the compatibility of your installed apps from the RoaringApps website.</p>
					<hr />
					
					<form id="account-options-form">
						<div class="form-group">
							<label for="opt-save-public" class="radio-label"><input type="radio" name="opt-save" value="public" id="opt-save-public"/>Yes, save my list of applications to RoaringApps and share them on my profile page.</label>
							<label for="opt-save-private" class="radio-label"><input type="radio" name="opt-save" value="private" id="opt-save-private" />Yes, save my list of applications to RoaringApps but keep them private.</label>
							<label for="opt-save-no" class="radio-label"><input type="radio" name="opt-save" value="no" id="opt-save-no" checked />No, don't save my list of applications to RoaringApps.</label>
						</div>
						<div class="form-group">
							<input type="submit" name="submit" value="Continue" class="btn btn-action" />
						</div>
						<div class="form-group">
						<!--	<p class="form-hint" tabindex="-1">Your application data is stored securely and never shared with a third-party.</p>-->
						</div>
						
						
						
					</form>
					
					<hr />
					
					
				</div>
			</div>
			
			<div id="view-contribute-review" class="main-view-panel" style="display: none;">			        
			        <div id="contribute-review-container"></div>
			</div>
			
			<div id="view-apps-list" class="main-view-panel" ng-show="state.currentView == 'apps-overview'">
				<nav class="topbar">
					<div id="status-selector" class="filter-bar">
						<div class="select-osx dropdown">
							<span class="current dropdown-toggle" data-toggle="dropdown">{{platforms.osx.versions[state.filters.status.os].name}} ({{platforms.osx.versions[state.filters.status.os].id}})</span>
							<ul class="dropdown-menu">
								<li ng-repeat="os in platforms.osx.versions" class="{{state.filters.status.os == os.reference ? 'current' : ''}}" ng-click="state.filters.status.os = os.reference"><em>{{os.id}}</em> &ndash; {{os.name}}</li>
							</ul>
						</div>
						<div><input type="radio" name="status" ng-model="state.filters.status.status" value="All" id="status-all" checked="checked" /><label for="status-all">All</label> </div>
						<div><input type="radio" name="status" ng-model="state.filters.status.status" value="Works fine" id="status-work-fine" /><label for="status-work-fine">Works fine</label> </div>
						<div><input type="radio" name="status" ng-model="state.filters.status.status" value="Doesn't work" id="status-dont-work" /><label for="status-dont-work">Doesn't work</label> </div>
						<div><input type="radio" name="status" ng-model="state.filters.status.status" value="Some problems" id="status-some-problems" /><label for="status-some-problems">Some problems</label> </div>
						<div><input type="radio" name="status" ng-model="state.filters.status.status" value="Unknown" id="status-unknown" /><label for="status-unknown">Unknown</label>  </div>
						
						<div class="filter-separator divider"></div>
						
						<div><input type="checkbox" name="hidesystem" ng-model="state.filters.hideSystem" id="filter-hidesystem" ng-true-value="true" ng-false-value="false" /><label for="filter-hidesystem">Hide system apps</label>  </div>						
						<div ng-show="account.user"><input type="checkbox" name="favourites" ng-model="state.filters.favourites" id="filter-fav" ng-true-value="true" ng-false-value="false" /><label for="filter-fav">Favourites</label>  </div>
					</div>
				</nav>
								
				<!-- Trials of divs instead of table for apps list -->	
				<div class="apps-list-2016">
					<div class="header">
						<div class="row">
							<div class="col-icon sticky-col"></div>
							<div class="col-application sticky-col">Application</div>
							<div class="col-os sticky-col" ng-repeat="platform in platforms.osx.versions">{{platform.id}}</div>
						</div>
					</div>
					<div class="body {{settings.matchIndicators ? 'show-match-indicators' : ''}}">
						<div class="row {{state.viewAppDetail == $index ? 'active' : ''}}" 
							ng-repeat="app in apps.matched | orderBy:'name' | filterByFavourites: state.filters.favourites ? account.user.favourites : false | hideSystemApps: state.filters.hideSystem | filterByStatus:state.filters.status | filterByMatches: state.filters.noMatch ? 0 : 1 | filter:{name: state.search}"
							ng-click="state.viewAppDetail = (state.viewAppDetail === $index ? null : $index)">
						
					        <div class="col-icon table-col">
					            <div class="match-indicator pc-{{::app.matches[0]._matchCertainty}}"></div>
					
					
					            <div class="icon-container">
					                <img src="" ng-src="{{app.icon}}" alt="{{app.name + 'icon'}}" class="app-icon" />
					            </div>
					        </div>
					
					        <div class="col-application table-col">
					            <p>
					                <strong>{{::app.name}}</strong>
					                <span class="app-actions-toggle" rel="popover" id="app-popover-toggle"></span>
					            </p>
					            <span class="app-meta">{{::app.version}}</span>
					
					            <div class="app-detail-view">
					                <table class="table table-clear">
					                    <tbody>
					                        <tr>
					                            <th>Developer</th>
					                            <td>{{::app.matches[0].developer}}</td>
					                        </tr>
					                        <tr>
					                            <th>Bundle ID</th>
					                            <td ng-click="$event.stopPropagation()"><tt>{{::app.bundleId}}</tt></td>
					                        </tr>
					                        <tr>
					                            <th>Location</th>
					                            <td><tt>{{::app.path}}</tt></td>
					                        </tr>
					                        <tr>
					                            <th>Match</th>
					                            <td>{{::app.matches[0].name}} ({{::app.matches[0]._matchCertainty}}%)</td>
					                        </tr>
																	<!--
																	<tr>
																	    <th>Arch</th>
																			<td>{{::app.bit.join(", ") || "Unknown" }}</td>
																	</tr>
																	-->
					                        <tr>
					                            <td colspan="2">
					                                <button class="btn" ng-if="app.matches && app.matches[0].url" ng-click="openBrowser(app.matches[0].url);$event.stopPropagation()">Visit developer site</button>
					                                <button class="btn" ng-click="openAppUrl(app);$event.stopPropagation()">View on RoaringApps</button>
																					<button class="btn" ng-click="experience.start(app, $index);$event.stopPropagation()" ng-if="account.user">Share compatibility status</button>
					                            </td>
					                        </tr>
					                    </tbody>
					                </table>
					
					            </div>
					
					        </div>
					
					        <div class="col-os table-col" ng-repeat="platform in ::platforms.osx.versions">
					            <div class="status-icon {{getStatus(app.matches[0].statuses.osx, platform.reference)}}"></div>
					        </div>
						
						
					</div><!-- /.row -->
				</div>
				
			
			</div> <!-- /#view-apps-list -->

		</section>
	
	</div>
	
	<script src="js/dist/compiled.js"></script>
</body>
</html>