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

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

{% block content %}
<section class="page-alert">
    <section class="content">
        <h2> Alert </h2>
        <p>
            Dear Customer, As per Section 194N for deduction of tax at source (TDS) on Cash Withdrawals above 20 lakhs
            for Financial Year: TDS 2% and above 1 Crore TDS 5% to be deducted w.e.f
            <strong> 01.07.2020 </strong> for Non I.T returns filers.
            You are required to submit I.T returns for previous 3 Financial Year or else TDS will be deducted accordingly.
            <br>
            Thanks and regards,
            <br>
            <strong> The Bharat Co-op Bank Ltd </strong>
        </p>
        <button id="close-alert-button"> Okay </button>
    </section>
</section>
<section class="toast">
	<header>ANNOUNCEMENTS</header>
	<div class="close-toast"><img src="{% static 'images/down-chevron.svg' %}" alt=""></div>
	<ul>
        <li class="highlight"> <a target="_blank" href="{% static 'files/loan-restructing-2020.pdf' %}"> Loan Restructing 2020 </a> </li>
        <li> <a href="{% static 'files/moratorium_application.docx' %}" download> Apply For Moratorium </a> </li>
        <li><a target="_blank" href="{% static 'files/election-notice2020.pdf' %}"> Election Notice 2020 </a></li>
		<li><a href="{% static 'files/notice-gbm-19.pdf' %}" target="_blank"> Annual General Body Meeting Notice 2019 </a></li>
		<li><a href="{% static 'files/report-gbm-19.pdf' %}" target="_blank"> Annual General Body Meeting Report 2018-19 </a></li>
		<li><a href="{% static 'files/UNCLAIMED_DEPOSITER.xls' %}" target="_blank">List of Unclaimed Depositers as of 31-12-2018.</a></li>
		<li><a href="{% static 'files/INOPERTIVE_ACOUNTS.xls' %}" target="_blank">List of Inoperative accounts as of 26-12-2018</a></li>
	</ul>
</section>
<div class="temp-intro-home">
		<div class="temp-name">Welcome to <mark>BCB</mark></div>
	</div>
	<header id="page-header">
		<div class="inner-header">
			<a href = "/" class="temp-brand">
				<figure>
					<img src="{% static 'images/edits/logo.jpg' %}" alt="">
				</figure>
				<h1>The <mark>Bharath Co-operative</mark> Bank</h1>
			</a>
			<nav id="desktop-navigation-menu">
				<ul>
					<li class="active">
						<a href="#home">HOME</a>
					</li>
					<li>
						<a href="#about">ABOUT</a>
					</li>
					<li>
						<a href="#service">SERVICES</a>
					</li>
					<li>
						<a href="#branches">BRANCHES</a>
					</li>
					<li>
						<a href="#enquiry">ENQUIRY</a>
					</li>
					<li>
						<a href="#contact">CONTACT</a>
					</li>
				</ul>
			</nav>
			<section id="mobile-hamburger-menu">
				<span class="icon-line"></span>
			</section>
		</div>
	</header>
	<nav id="mobile-nav-menu">
		<ul>
			<li class="active">
				<a href="#home">HOME</a>
			</li>
			<li>
				<a href="#about">ABOUT</a>
			</li>
			<li>
				<a href="#service">SERVICES</a>
			</li>
			<li>
				<a href="#branches">BRANCHES</a>
			</li>
			<li>
				<a href="#enquiry">ENQUIRY</a>
			</li>
			<li>
				<a href="#contact">CONTACT</a>
			</li>
		</ul>
	</nav>
	<div class="temp-contact-info">
		<ul>
			<li>
				<img src="{% static 'images/mail-icon.svg' %}" alt="">
				<div class="contact-content">
					<span>Send us a message</span>
					<a href="mailto:bcbho34@bsnl.in">bcbho34@bsnl.in</a>
				</div>
			</li>
			<li class="active">
				<img src="{% static 'images/phone-call.svg' %}" alt="">
				<div class="contact-content">
					<span>Give us a Call</span>
					<a href="tel:+26632783">2663 2783, 2663 3566</a>
				</div>
			</li>
			<li>
				<img src="{% static 'images/time.svg' %}" alt="">
				<div class="contact-content">
					<span>Opening Hours (Head Office)</span>
					<span>Mon-Sat: 9:30 A.M - 12:30 P.M, <br> 4:30 P.M - 7:00 P.M</span>
				</div>
			</li>
		</ul>
	</div>
	<section id="home">
		<figure class="hide">
			<img src="{% static 'images/edits/bank.JPG' %}" alt="">
		</figure>
		<div class="description hide">
			<h3>
				BEING IN CONTROL <br>OF YOUR <mark>FINANCES</mark>
			</h3>
			<p>
				To emerge as a prime national bank backed by modern technology
				meeting customer’s aspirations with professional banking services and
				sustained growth contributing to national development.
			</p>
			<a href="#service">
				<button type="button">OUR SERVICES<i class="fas fa-chevron-right"></i></button>
			</a>
		</div>
	</section>
	<section id="about">
		<div class="wrapper">
			<div class="description">
				<h3>ABOUT <mark>BCB</mark></h3>
				<!-- <p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
					incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
				</p> -->
				<p>
					Vision of Bharath Co-operative Bank is to be sound and strong, truly
					member owned, democratically controlled and ethically managed
					banking institution with high degree of transparency, and providing need
					based services essentially to the middle class, lower –middle class and
					marginalized section of society.
				</p>
				<a href="/about">
					<button type="button">Read More</button>
				</a>
			</div>
			<figure>
				<img src="{% static 'images/03.png' %}" alt="">
			</figure>
		</div>
	</section>
	<section id="service">
		<h3>OUR SEVICES</h3>
		<!-- <p>	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam.
		</p> -->
		<ul class="owl-carousel owl-service">
			<li>
				<a href="/deposit" class="inner-contents">
					<img src="{% static 'images/economic-growth.svg' %}" alt="">
					<div class="title">DEPOSIT SCHEMES</div>
					<p>Save for the future, the way you want to, with our range of Deposits</p>
				</a>
			</li>
			<li>
				<a href="/loans" class="inner-contents">
					<img src="{% static 'images/payment-method.svg' %}" alt="">
					<div class="title">LOANS AND ADVANCES</div>
					<p>
						Get a step closer to fulfilling your dreams by applying for personal loan
						and meet your financial needs at attractive interest rates.
					</p>
				</a>
			</li>
			<li>
				<a href="/others" class="inner-contents">
					<img src="{% static 'images/bank-building.svg' %}" alt="">
					<div class="title">OTHER SERVICES</div>
					<p>	Time is money and we at Barath Co-Operative Bank value your time.
						Change the way you bank.
					</p>
				</a>
			</li>
		</ul>
		<div class="service-carousel-btn">
			<i class="fas fa-chevron-left" id="service-carousel-right-btn"></i>
			<i class="fas fa-chevron-right" id="service-carousel-left-btn"></i>
		</div>
	</section>
	<section id="branches">
		<h3>BRANCHES</h3>
		<p>
			Weekly Holidays: Sunday, 2nd and 4th Saturdays.
		</p>
		<div class="owl-carousel owl-branches">
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/head-office.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">JAYANAGAR</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.30 pm - 7.00 p.m
					</div>
					<div class="person-info">H.O: #30, 15th cross, 3rd block, Bangalore - 011</div>
					<div class="person-info">PH : 2663 2783, 2663 3566</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/mathikere.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">mathikere</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.00 pm - 6.30 p.m
					</div>
					<div class="person-info">No. 1047, Triveni road, Bangalore - 054</div>
					<div class="person-info">PH : 2337 4010</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/vijaynagar.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">vijayanagar</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.00 pm - 6.30 p.m
					</div>
					<div class="person-info">No. 2941/E, Service road, OPP. Maruthi Mandir, Vijayanagar 2nd stage, Bangalore - 040</div>
					<div class="person-info">PH : 2340 3063</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/kengeri.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">kengeri</div>
					<div class="person-info">
						10.00 a.m - 1.30 p.m,
						2.00 pm - 4.00 p.m
					</div>
					<div class="person-info">No. 40, SLN Complex Mysore road, Kengeri town, Bangalore - 060</div>
					<div class="person-info">PH : 2848 2256</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/yelanka.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">yelanka</div>
					<div class="person-info">
						9.30 a.m - 12.30 p.m,
						4.00 pm - 6.30 p.m
					</div>
					<div class="person-info">No. 796, 8th Main Road, 'A' sector, Opp. N.E.S Office, Yelahanka New Town, Bangalore - 064</div>
					<div class="person-info">PH : 2856 2074</div>
				</div>
			</div>
			<div class="owl-item-branches">
				<figure>
					<img src="{% static 'images/beguru.jpg' %}" alt="">
				</figure>
				<div class="description">
					<div class="person-name">beguru</div>
					<div class="person-info">
						10.00 a.m - 1.30 p.m.
						2.00 pm - 5.00 p.m
					</div>
					<div class="person-info">16th Main, 4th Block, Bangalore - 011</div>
					<div class="person-info">PH : 2574 0777</div>
				</div>
			</div>
		</div>
		<div class="branches-carousel-btn">
			<i class="fas fa-chevron-left" id="branches-carousel-right-btn" ></i>
			<i class="fas fa-chevron-right" id="branches-carousel-left-btn"></i>
		</div>
	</section>
	<section id="enquiry">
		<h3>ENQUIRY FORM</h3>
		<form method="POST">
			<fieldset>
				<input type="text" placeholder="Name" name="name" required>
				<input type="email" placeholder="Email ID" name="email" required>
				<input type="tel" placeholder="Phone" name="phone">
				<input type="text" placeholder="Subject" name="subject" required>
				<textarea name="message" rows="6" placeholder="Your Message..." name="message" required></textarea>
				<button type="button" id="contact-button">Send</button>
			</fieldset>
		</form>
	</section>
	<section id="contact">
		<h3>CONTACT US</h3>
		<div class="inner-container">
			<figure>
				<img src="{% static 'images/map.png' %}" alt="">
			</figure>
			<ul class="description-container">
				<li>
					<label>Address</label>
					<address>
						H.O: #30, 15th cross, 3rd block, Bangalore - 560 011
					</address>
				</li>
				<li>
					<label>Phone</label>
					<div class="contact-content">2663 2783, 2663 3566</div>
				</li>
				<li>
					<label>E-mail</label>
					<a href="mailto:bcbho34@bsnl.in" class="contact-content">bcbho34@bsnl.in</a>
				</li>
			</ul>
		</div>
	</section>
{% endblock content %}

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