| {% extends 'layout.html' %}
| {% from '_macros/_navigation.html' import navigation_homepage %}
| {% from '_macros/_opengraph.html' import opengraph %}
include ../../../pillar/src/templates/mixins/components
include mixins/components

| {% set title = 'services' %}

| {% set page_title = 'Services' %}
| {% set page_description = 'On Blender Cloud you can create and share personal projects, access our texture and HDRI library (or create your own), keep track of your production, manage your renders and much more!' %}
| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_services.jpg', _external=true) %}

| {% block page_title %}{{ page_title }}{% endblock %}

| {% block og %}
| {{ opengraph(page_title, page_description, page_header_image, request.url) }}
| {% endblock %}

| {% block navigation_tabs %}
| {{ navigation_homepage(title) }}
| {% endblock navigation_tabs %}

| {% block page_overlay %}
#page-overlay.video
	.video-embed
| {% endblock %}

| {% block body %}
.container.py-4
	+category_list_header('{{ page_title }}', '{{ page_description }}', '{{ request.url }}')

- var addon_text = 'Available through the <a href="{{ url_for(\'cloud.services\') }}#blender-cloud-add-on">Blender Cloud add-on</a>';
section#blender-cloud-add-on.page-card
	.page-card-side
		h2.page-card-title
			| Blender Cloud add-on
		.page-card-summary
			p.
				The Blender Cloud add-on provides access to most of our services directly within Blender.
			p.
				Use the add-on to share images online, submit renders to Flamenco or browse textures and HDRI libraries!

			hr

			small Blender Cloud add-on requires Blender 2.78 or newer

		a.btn.btn-primary(
			href="/r/downloads/blender_cloud-latest-addon.zip",
			title="Download Blender Cloud add-on")
			i.pi-download
			| Download add-on &nbsp;<small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}

	a.page-card-side(
		href="/r/downloads/blender_cloud-latest-addon.zip",
		title="Download Blender Cloud add-on")
		img(
			src="{{ url_for('static', filename='assets/img/features/blender_cloud_addon_thumbnail.png')}}")

section#blender-sync.page-card
	.page-card-side
		h2.page-card-title Blender Sync
		.page-card-summary
			| Save your settings once. Use them anywhere.
			| Carry your Blender configuration with you,
			| use our add-on to sync your keymaps and preferences.
			hr
			small Blender Sync is <strong>free</strong> for everyone! No subscription required.
			small  This add-on requires Blender 2.78 or newer.

			.tip !{addon_text}

		a.btn.btn-outline-primary(
			href="/r/downloads/blender_cloud-latest-addon.zip",
			title="Download Blender Cloud add-on")
			i.pi-download
			| Download add-on &nbsp;<small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}

		a.btn.btn-link(
			href="/blog/introducing-blender-sync",
			title="Learn more about Blender Sync")
			| Learn More
			i.pi-angle-right

	a.page-card-side(
		href="/blog/introducing-blender-sync",
		title="Learn more about Blender Sync")
		img(
			src="{{ url_for('static', filename='assets/img/features/sync_thumbnail.jpg')}}")


section#texture-browser.page-card
	.page-card-side
		h2.page-card-title Texture & HDRI Browser
		.page-card-summary
			p.
				Access the <a href="/p/textures/">Blender Cloud Textures</a>
				library from within Blender using our exclusive add-on.
				Create, manage and share <em>your own</em> texture libraries!

			.tip !{addon_text}

		a.btn.btn-outline-primary.js-watch-video(
			href="https://www.youtube.com/watch?v=-srXYv2Osjw",
			data-youtube-id="-srXYv2Osjw",
			title="Watch video about Texture and HDRI Browser")
			i.pi-play
			| Watch Video

	a.page-card-side(
		class="js-watch-video",
		href="https://www.youtube.com/watch?v=-srXYv2Osjw",
		data-youtube-id="-srXYv2Osjw",
		title="Watch video about Texture and HDRI Browser")
		img(
			src="{{ url_for('static', filename='assets/img/features/tex_library_thumbnail.jpg')}}")


section#image-sharing.page-card
	.page-card-side
		h2.page-card-title Image Sharing
		.page-card-summary
			| Got a nice render, a Blender oddity, a cool screenshot?
			| Share it instantly from within Blender to the Cloud, to the world!

			.tip !{addon_text}

		a.btn.btn-outline-primary.js-watch-video(
			href="https://www.youtube.com/watch?v=yvtqeMBOAyk",
			data-youtube-id="yvtqeMBOAyk",
			title="Watch video about Image Sharing")
			i.pi-play
			| Watch Video

		a.btn.btn-link(
			href="/blog/introducing-image-sharing",
			title="Learn more about Image Sharing")
			| Learn More
			i.pi-angle-right

	a.page-card-side(
		class="js-watch-video",
		href="https://www.youtube.com/watch?v=yvtqeMBOAyk",
		data-youtube-id="yvtqeMBOAyk",
		title="Watch video about Image Sharing")
		img(
			src="{{ url_for('static', filename='assets/img/features/image_sharing_thumbnail.jpg')}}")


section#projects.page-card
	.page-card-side
		h2.page-card-title Private Projects
		.page-card-summary.
			Create and manage your own personal projects.
			Upload assets and collaborate with other Blender Cloud members.

		a.btn.btn-link(
			href="/blog/introducing-private-projects",
			title="Learn more about Private Projects")
			| Learn More
			i.pi-angle-right

	a.page-card-side(
			href="/blog/introducing-private-projects",
			title="Learn more about Private Projects")
		img(
			src="{{ url_for('static', filename='assets/img/features/projects_thumbnail.jpg')}}")


section#attract.page-card
	.page-card-side
		h2.page-card-title
			| Attract
		.page-card-summary.
			Production-management software for your film, game, or commercial projects.

		a.btn.btn-outline-primary.js-watch-video(
			href="https://www.youtube.com/watch?v=b9x1rlyyt_o",
			data-youtube-id="b9x1rlyyt_o")
			i.pi-play
			| Watch Video

		a.btn.btn-link(
			href="/blog/attract-and-flamenco-public-beta",
			title="Learn more about Attract")
			| Learn More
			i.pi-angle-right

	a.page-card-side(
			href="/blog/attract-and-flamenco-public-beta",
			title="Learn more about Attract")
		img(
			src="{{ url_for('static', filename='assets/img/features/attract_thumbnail.jpg')}}")


section#flamenco.page-card
	.page-card-side
		h2.page-card-title
			| Flamenco
		.page-card-summary.
			Take control of your computing infrastructure and get things done.

		a.btn.btn-outline-primary.js-watch-video(
			href="https://www.youtube.com/watch?v=7cnFKhsM67Q",
			data-youtube-id="7cnFKhsM67Q")
			i.pi-play
			| Watch Video

		a.btn.btn-link(
			href="https://flamenco.io",
			title="Learn more about Flamenco")
			| Learn More
			i.pi-angle-right

	a.page-card-side(
		href="https://flamenco.io",
		title="Learn more about Flamenco")
		img(
			src="{{ url_for('static', filename='assets/img/features/flamenco_thumbnail.jpg')}}")


| {% if not current_user.has_role('subscriber') %}
section.page-card(
	style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})")
	.page-card-side

		h2.page-card-title
			| All of this, plus hours of training and production assets.

		.page-card-summary.text-white
			| Join us for only $9.90/month!

		a.btn.btn-outline-light.px-3(href="https://store.blender.org/product/membership/")
			i.pi-heart.mr-2
			| Subscribe Now
| {% endif %}


| {% endblock %}

| {% block footer_scripts %}
script.
	// Hide the video overlay.
	function hideOverlay() {
		$('#page-overlay.video').removeClass('active');
		$('#page-overlay.video .video-embed').html('');
	}

	// Click anywhere in the page or hit Esc to hide the overlay.
	$(document).click(function() {
		hideOverlay();
	});

	$(document).keyup(function(e) {
		if (e.keyCode == 27) {
			hideOverlay();
		}
	});

	$('a.js-watch-video').click(function(e){
		var videoId = $(this).attr('data-youtube-id');

		e.preventDefault();
		e.stopPropagation();

		$('#page-overlay.video').addClass('active');
		$('#page-overlay .video-embed').html('<iframe src="https://www.youtube.com/embed/' + videoId +'?rel=0&amp;showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>')
	});

| {% endblock %}