{% extends "frontend/base.html" %}
{% load i18n %}
{% load static %}

{% block "content" %}
        <!--==== INNERPAGE-WRAPPER =====-->
        <section class="innerpage-wrapper">
            <div id="thank-you" class="innerpage-section-padding">
                <div class="container">
                    <div class="row">
        
                        <div class="col-12 col-md-12 col-lg-9 col-xl-9 content-side">
                            <div class="space-right">
                                <div class="thank-you-note">
                                   <h3>Die Buchung wurde bestätigt! Vielen Dank und gute Reise!</h3>
                                   <p>Drucken Sie diese Seite bitte für Ihre Unterlagen aus.</p>
                                   <a href="#" class="btn btn-orange">Details drucken</a>
                               </div><!-- end thank-you-note -->
                                                           
                               <div class="traveler-info">
                                       <h3 class="t-info-heading"><span><i class="fa fa-info-circle"></i></span>Reisedetails</h3>
                                       <div class="table-responsive">
                                           <table class="table">
                                            <tbody>
                                                <tr>
                                                    <td>Buchungsnummer:</td>
                                                    <td>{{ object.id }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Vorname:</td>
                                                    <td>{{ object.client.first_name }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Nachname:</td>
                                                    <td>{{ object.client.last_name }}</td>
                                                </tr>
                                                <tr>
                                                    <td>E-Mail-Adresse:</td>
                                                    <td>{{ object.client.user.email }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Adresse:</td>
                                                    <td>{{ object.client.full_address }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                       </div><!-- end table-responsive -->
                                    
                                    <div class="payment-method">
                                        <h3 class="t-info-heading"><span><i class="fa fa-credit-card"></i></span>Zahlung</h3>
                                        <p>Die Zahlung wurde durchgeführt mit:</p>
                                        <ul class="list-inline">
                                            <li class="list-inline-item"><img src="images/payment-1.png" class="img-fluid" alt="payment-img" /></li>
                                            <li class="list-inline-item"><img src="images/payment-2.png" class="img-fluid" alt="payment-img" /></li>
                                            <li class="list-inline-item active"><img src="images/payment-3.png" class="img-fluid" alt="payment-img" /></li>
                                            <li class="list-inline-item"><img src="images/payment-4.png" class="img-fluid" alt="payment-img" /></li>
                                        </ul>
                                    </div><!-- end payment-method -->
                               </div><!-- end traveler-info -->
                            </div><!-- end space-right -->
                        </div><!-- end columns -->
                                
                        <div class="col-12 col-md-12 col-lg-3 col-xl-3 side-bar blog-sidebar right-side-bar">
                      
                            <div class="row">    
        
                                <div class="col-12 col-md-6 col-lg-12">
                                    <div class="side-bar-block recent-post">
                                        <h2 class="side-bar-heading">Zusatzangebote</h2>
        
                                        <div class="recent-block">
                                            <div class="recent-img">
                                                <a href="#"><!--<img src="images/holiday-deal-1.jpg" class="img-reponsive" alt="holiday-deal-image" />--></a>
                                            </div><!-- end recent-img -->
                                            
                                            <div class="recent-text">
                                                <a href="#"><h5>Mietwagen gefällig?</h5></a>
                                                <span class="date">Bei Sevent schon ab 7 Euro pro Tag!</span>
                                            </div><!-- end recent-text -->
                                        </div><!-- end recent-block -->
        
                                        <div class="recent-block">
                                            <div class="recent-img">
                                                <a href="#"><i class="fas fa-train"></i></a>
                                            </div><!-- end recent-img -->
                                            
                                            <div class="recent-text">
                                                <a href="#"><h5>Lieber gemütlich per Bahn?</h5></a>
                                                <span class="date">Aus ganz Österreich ab 29 Euro mit dem BÖB Geizgleis!</span>
                                            </div><!-- end recent-text -->
                                        </div><!-- end recent-block -->
        
                                   </div><!-- end side-bar-block -->
                                </div><!-- end columns -->
                                
                                <div class="col-12 col-md-6 col-lg-12">
                                    <div class="side-bar-block contact">
                                        <h2 class="side-bar-heading">Kontakt</h2>
                                        <div class="c-list">
                                            <div class="icon"><span><i class="fa fa-envelope"></i></span></div>
                                            <div class="text"><p>kontakt@journeyjoker.at</p></div>
                                        </div><!-- end c-list -->
                                        
                                        <div class="c-list">
                                            <div class="icon"><span><i class="fa fa-phone"></i></span></div>
                                            <div class="text"><p>+43 800 093004</p></div>
                                        </div><!-- end c-list -->
                                        
                                        <div class="c-list">
                                            <div class="icon"><span><i class="fa fa-map-marker"></i></span></div>
                                            <div class="text"><p>Gartengasse 22/7/3, 8010 Graz, Österreich</p></div>
                                        </div><!-- end c-list -->
                                    </div><!-- end side-bar-block -->
                                </div><!-- end columns -->
                                
                                <div class="col-12 col-md-12 col-lg-12">
                                    <div class="side-bar-block follow-us">
                                        <h2 class="side-bar-heading">Folge uns!</h2>
                                        <ul class="list-unstyled list-inline">
                                            <li class="list-inline-item"><a href="#"><span><i class="fa fa-facebook"></i></span></a></li>
                                            <li class="list-inline-item"><a href="#"><span><i class="fa fa-twitter"></i></span></a></li>
                                            <li class="list-inline-item"><a href="#"><span><i class="fa fa-linkedin"></i></span></a></li>
                                            <li class="list-inline-item"><a href="#"><span><i class="fa fa-google-plus"></i></span></a></li>
                                            <li class="list-inline-item"><a href="#"><span><i class="fa fa-pinterest-p"></i></span></a></li>
                                        </ul>
                                    </div><!-- end side-bar-block -->
                                        </div><!-- end columns -->
                                
                                    </div><!-- end row -->
                        </div><!-- end columns -->
                        
                    </div><!-- end row -->
                </div><!-- end container -->
            </div><!-- end thank-you --> 
        </section><!-- end innerpage-wrapper -->
{% endblock %}