<navbar model="ctrl.navModel"></navbar>

<div class="page-container">
	<div class="page-header">
		<h1>Data Sources</h1>
		<a class="btn btn-success" href="datasources/new">
			<i class="fa fa-plus"></i>
			Add data source
		</a>
	</div>

	<section class="card-section" layout-mode>
    <layout-selector></layout-selector>

		<ol class="card-list" >
			<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
				<a class="card-item" href="datasources/edit/{{ds.id}}/">
					<div class="card-item-header">
						<div class="card-item-type">
							{{ds.type}}
						</div>
					</div>
					<div class="card-item-body">
						<figure class="card-item-figure">
							<img ng-src="{{ds.typeLogoUrl}}">
						</figure>
						<div class="card-item-details">
							<div class="card-item-name">
								{{ds.name}}
								<span ng-if="ds.isDefault">
									<span class="btn btn-secondary btn-mini">default</span>
								</span>
							</div>
							<div class="card-item-sub-name">
								{{ds.url}}
							</div>
						</div>
					</div>
				</a>
			</li>
		</ol>
	</section>

	<div ng-if="ctrl.datasources.length === 0">
		<em>No data sources defined</em>
	</div>

</div>
