<mat-sidenav-container autosize class="maarch-container">
    <mat-sidenav-content>
        <div class="bg-head">
            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                <div class="bg-head-title-label">
                    <header-left></header-left>
                </div>
                <div class="bg-head-title-tool">
                    <header-right></header-right>
                </div>
            </div>
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
            </div>
        </div>
        <div class="container" [class.fullContainer]="appService.getViewMode()">
            <div class="container-content">
                <div *ngIf="loading" style="display:flex;height:100%;">
                    <mat-spinner style="margin:auto;"></mat-spinner>
                </div>
                <mat-card *ngIf="!loading" class="card-app-content">
                    <div class="col-sm-8">
                        <h3>Maarch Courrier {{applicationVersion}} </h3>
                        <hr />
                        <p><em>Copyright &copy; 2008-2020 Maarch SAS {{lang.groupeCompany}}</em></p>
                        <p>{{lang.maarchLicence}}
                            <a target="blank" href="http://www.gnu.org/licenses/gpl-3.0-standalone.html">licence GNU GPLv3</a>.</p>
                        <div>
                            <ul>
                                <li>{{lang.officialWebsite}} : <a target="blank" href="https://maarch.com/">https://maarch.com</a></li>
                                <li>{{lang.community}} : <a target="blank"
                                                            href="https://community.maarch.org/">https://community.maarch.org</a></li>
                                <li>{{lang.documentation}} : <a target="blank"
                                                                href="https://docs.maarch.org/">https://docs.maarch.org</a></li>
                            </ul>
                        </div>
                        <p>&nbsp;</p>
                        <h3>{{lang.externalComponents}}</h3>
                        <hr />
                        <em>{{lang.thanksToExtDev}}</em>
                        <p>&nbsp;</p>
                        <ul>
                            <li><a target="blank" href="https://angular.io/">Angular</a></li>
                            <li><a target="blank" href="https://material.angular.io/">Angular Material</a></li>
                            <li><a target="blank" href="http://getbootstrap.com/">Bootstrap</a></li>
                            <li><a target="blank" href="http://www.chartjs.org/">Chart.js</a></li>
                            <li><a target="blank" href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></li>
                            <li><a target="blank" href="http://www.fpdf.org/">Fpdf</a></li>
                            <li><a target="blank" href="http://www.setasign.de/products/pdf-php-solutions/fpdi/">fpdi</a></li>
                            <li><a target="blank" href="https://jquery.com/">Jquery</a></li>
                            <li><a target="blank" href="https://github.com/running-coder/jquery-typeahead">Jquery Typeahead</a></li>
                            <li><a target="blank" href="http://logging.apache.org/log4php/">log4php</a></li>
                            <li><a target="blank" href="http://chir.ag/tech/download/pdfb">Pdfb</a></li>
                            <li><a target="blank" href="http://www.foolabs.com/xpdf/">Pdftotext</a></li>
                            <li><a target="blank" href="http://www.tinybutstrong.com/">Tiny But Strong</a></li>
                            <li><a target="blank" href="http://www.tinymce.com/">TinyMCE</a></li>
                            <li><a target="blank" href="http://framework.zend.com/">Zend Lucene Search</a></li>
                        </ul>
                    </div>

                    <div class="col-sm-4">
                        <h3>Crédits</h3>
                        <hr />
                        <ul>
                            <li>Florian AZIZIAN, Damien BUREL, Bruno CARLIN, Carole COTIN, Prosper DE LAURE, Driss DEMIRAY, Gaël DE
                                VILLEBLANCHE, Emmanuel DILLARD, Mathieu DONZEL, Jean-Louis ERCOLANI, Claire FIGUERAS, Laurent
                                GIOVANNONI,
                                Guillaume HEURTIER, Henri QUENEAU, Kader KANE, Yves-Christian KPAKPO, Alexandre MORIN, Sébastien
                                NANABONDJA, Fodé NDIAYE, Cédric NDOUMBA, Alex ORLUC, Alexis RAGOT, Alexandre STEFANOVIC, Serge
                                THIERRY-MIEG,
                                Cyril VAZQUEZ, Arnaud VEBER, Loic VINET</li>
                            <br>
                            <li><em>{{lang.thanksToCommunity}}</em></li>
                        </ul>
                        <p>&nbsp;</p>
                        <div class="img_credits_maarch_box">
                            <img src="static.php?filename=maarch_box.svg" />
                        </div>
                    </div>
                </mat-card>
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>