{% extends "base.html" %}

{% block main_header %}
<meta name="description" content="{{front.description}}" />
<meta name="author" content="{{front.author}}" />
<link href="{{meta.URL}}/meetups/{{front.slug}}/" rel="canonical" />
<title>{{front.title}}</title>
<meta content="{{front.title}}" property="og:title" />
<meta content="{{front.description}}" property="og:description" />
<meta content="{{meta.URL}}/meetups/{{front.slug}}/" property="og:url" />
{% endblock main_header %}


{% block main_content %}
<!-- Page Content-->
<section class="py-5">
    <div class="container px-5 my-5">
        <div class="row gx-5">
            <div class="col-lg-8">
                <!-- Post content-->
                <article>
                    <!-- Post header-->
                    <header class="mb-4">
                        <!-- Post title-->
                        <h1 class="fw-bolder mb-1">{{front.title}}</h1>
                        <!-- Post categories-->
                        <a class="badge bg-secondary text-decoration-none link-light mt-3" href="/">Python</a>
                        <a class="badge bg-secondary text-decoration-none link-light mt-3" href="/">Meetup</a>
                    </header>
                    <section class="mb-5">
                        {{ content }}
                    </section>
                </article>
            </div>
            <div class="col-lg-4">
                <div class="py-2 sidebar">
                    <div class="d-flex align-items-center mt-lg-4 mb-4">
                        <img class="img-fluid rounded-circle" src="{{meta.URL}}/static/assets/author.png" width="60"
                            height="60" alt="{{meta.author}} Image" />
                        <div class="ms-3">
                            <h4 class="fw-bold">{{front.author}} </h4>
                            <div class="text-muted">Organizer</div>
                        </div>
                    </div>
                    <div class="card border-0 bg-light mt-xl-3">
                        <div class="card-body p-4 py-lg-4">
                            <div class="text-muted mb-2">Meetup Date: <div class="fw-bold">{{front.date}}</div>
                            </div>
                            <div class="text-muted mb-2">Meetup Location: <div class="fw-bold">{{front.address}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 bg-light mt-xl-3">
                        <div class="card-body p-4 py-lg-4">
                            <img class="img-fluid rounded mb-5 mb-lg-0" src="{{meta.URL}}/images/{{front.featureimage}}"
                                alt="{{meta.author}} image">
                        </div>
                    </div>

                    <div class="card border-0 bg-light mt-xl-3">
                        <div class="card-body p-4 py-lg-4">
                            <div class="d-flex align-items-center justify-content-center">
                                <div class="text-center">
                                    <div class="h6 fw-bolder">Have more questions?</div>
                                    <p class="text-muted mb-4">
                                        Check out our <a href=" {{meta.URL}}/contact/">Contact us</a> page to get in
                                        touch
                                        or to get in touch send us an email at <code>pybodensee at gmail dot com</code>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock main_content %}