<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
  <logo>
    <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
  </logo>
  <links>
    <ul class="navbar-nav mr-auto">
    </ul>
  </links>
</mdb-navbar>

<section class="view intro-2 mask rgba-gradient">
  <div class="container-fluid full-bg-img mask rgba-gradient">
    <!--Grid column-->
    <div class="col-lg-6 col-md-8">

      <!--Card-->
      <div class="card text-white card-cascade narrower card-image">

        <div class="text-white text-center align-items-center">
          <!--Card image-->
          <div class="card-header text-center">
            <h2 class="h2-responsive">File Download</h2>
          </div>
          <!--/Card image-->


          <!--Card content-->
          <div class="card-body text-center">
            <div class="col-md-12">
              <div class="row">
                <div class="col-md-6">
                  <i class="fa fa-file fa-4x" aria-hidden="true"></i>
                </div>
                <div class="col-md-6">
                  <p><strong>{{file?.name}}</strong></p>
                  <p>{{ file?.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</p>
                </div>
              </div>
            </div>

            <hr class="hr-light mb-3 mt-4">

            <button class="btn btn-outline-white wow fadeInleft waves-light"><a class="text-white" href="{{file?.url}}" download="{{ file?.name.toString()}}">Download</a></button>
          </div>
          <!--/.Card content-->
        </div>

      </div>
      <!--/.Card-->

    </div>
    <!--Grid column-->
  </div>
</section>
