{% extends 'base.html' %}
{% load staticfiles %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static 'css/service.css' %}">
{% endblock stylesheets %}

{% block navigation %} 
{% include 'partials/navigation.html' with menu='Service' %}
{% endblock navigation %}

{% block content %}
<section class="banner">
    <h3>Services</h3>
</section>
<section class="service-content">
    <ul class="side-content">
        <li data-tab = "sales" class="active">Sales &amp; Trading</li>
        <li data-tab = "financial" >Financial Advisors</li>
        <li data-tab = "investment">Investment Planning</li>
        <li data-tab = "tax">Tax Consultants</li>
        <li data-tab = "loan">Financial Advisors</li>
        <li data-tab = "consultant">Tax Consultants</li>
        <li data-tab = "planning">Investment Planning</li>
    </ul>
    <div class="scene-container">
        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" class = "active" data-scene-target = "sales"></iframe>
        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "financial"></iframe>
        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "investment"></iframe>
        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "tax"></iframe>
        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "loan"></iframe>
        <iframe src="{% static 'files/sample-2.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "consultant"></iframe>
        <iframe src="{% static 'files/sample-1.pdf' %}" frameborder="0" style="width:100%; height:100%;" data-scene-target = "planning"></iframe>
    </div>
</section>
{% endblock content %}

{% block scripts %}
<script src="{% static 'js/service.js' %}" ></script>
{% endblock scripts %}