{% extends 'base.html' %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='github-activity-0.1.5.min.css') }}">

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='github-activity-0.1.5.min.js') }}"></script>
{% endblock head %}
{% block body %}
<!-- Hero Section -->
<section class="hero is-fullheight-with-navbar">
	<div class="hero-body">
		<div class="container has-text-centered">
			<p class="title">
				Xevion
			</p>
			<p class="subtitle">
				Python Developer
			</p>
		</div>
	</div>
</section>
<!-- End Hero Section -->

<section class="section">
	<div class="is-divider" data-content="Recent Projects"></div>
</section>

<!-- Section -->
<section class="section section-padding">
	<div class="container">
		{% if content %}
		<div class="columns is-mobile is-multiline is-centered">

			<!-- GitHub Activity Feed -->
			<div class="column is-5">
				<div class="card">
					<div class="card-header">
						<div class="card-header-title">
							GitHub Actviity
						</div>
					</div>
					<div class="card-content">
						<!-- GitHub Feed -->
						<div id="feed">
						</div>
					</div>
				</div>
			</div>
			<!-- End GitHub Activity Feed -->

			{% for card in content %}
			<div class="column is-5">
				<!-- Card -->
				<div class="card">
					<div class="card-header">
						<div class="card-header-title">
							{{  card.title }}
						</div>
					</div>
					<div class="card-image">
						<figure class="image">
							<img src="https://picsum.photos/600/400/?random={{ card.seed }}" alt="Picsum Picture">
						</figure>
					</div>
					<div class="card-content">
						<div class="content word-break">
							{{ card.text }}
						</div>
					</div>
				</div>
				<!-- Card End -->
			</div>
			{% endfor %}
		</div>
		{% endif %}
	</div> </section>
<!-- End Dynamic Content -->
<script> GitHubActivity.feed({
	username: "xevion",
	repository: "xevion.dev",
	selector: "#feed",
	limit: 10 // optional
});
</script>

{% endblock body %}