{% extends 'front.twig' %}

{% block title %} Information Hub  {% endblock %}


{% block body %}

    <style type="text/css">
        .info-tile {
            padding: 20px 10px;
            border-radius: 10px;
            border: 1px solid #cbd3cd;
        }
        .info-tile-image {
            min-height: 200px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .info-tile-sub-itle {
            margin-top: 20px;
            text-transform: uppercase;
            color: #b1b1b1;
            font-size: 16px;
            font-weight: bold;
            height: 20px;
            overflow: hidden;
        }
        .info-tile-itle {
            margin-top: 15px;
            margin-bottom: 25px;
            height: 60px;
            overflow: hidden;
            color: #0F0F1A;
            font-size: 25px;
        }
        .info-tile-timestamp {
            font-size: 14px;
            color: #6c757d;
        }
        .info-tile-timestamp span {
            font-weight: 600;
            font-size: 15px;
        }
        .info-tile-itle:hover, .info-tile-sub-itle:hover {
            color: #0f6674;
        }
        .article-title a {
            color: #1da1f2 !important;
        }
        .article-title a:hover {
            color: #FFFFFF !important;
        }
    </style>

    <section class="w3l-job-overview1 mt-5">
        <div class="header-view py-5 pt-5">
            <div class="container pt-3">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h3 class="my-3 article-title"><a href="{{ path('info_hub_index') }}">Information Hub</a> > {{ articleName }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="w3l-job-overview2 py-5">

        <div class="container">
            <div class="row">
                <div class="col-md-10">

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Information Hub</h5>
                        </div>
                        <div class="card-body w3l-blog">

                            {% include 'info-hub/articles/'~slug~'.twig' %}

                        </div>
                    </div>

                </div>
                <div class="col-md-2">
                    {% include 'partials/google-advert.twig' %}
                </div>
            </div>

        </div>
    </section>


    <script type="text/javascript">

        {#$.ajax({#}
        {#    type: 'post',#}
        {#    url: '/encoder-decoder/encode',#}
        {#    datatype: 'json',#}
        {#    data: {#}
        {#        textToHash : textToHash,#}
        {#        module : '{{ module }}',#}
        {#    }#}
        {#})#}
        {#    .done(function (data) {#}

        {#        $("#hash-container-your-text").html(textToHash);#}
        {#        $("#hash-container-your-hash").html(data.hash);#}
        {#        $("#hash-container").css("display", "block");#}
        {#    })#}
        {#    .fail(function (jqXHR, textStatus, errorThrown) {#}

        {#    });#}

    </script>


{% endblock %}