% title l('ABOUT');
%= include 'header'
%= include 'public_toolbar'
<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        %= l('ABOUT')
      </h3>
    </div>
    <div class="panel-body">
      <p>
        %== l('ABOUT_VROOM')
      </p>
    </div>
  </div>
  % if ($config->{'interface.demo'}){
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        %= l('WHO_IS_BEHIND_VROOM')
      </h3>
    </div>
    <div class="panel-body">
      <p>
        %== l('ABOUT_WHO_IS_BEHIND_VROOM')
      </p>
    </div>
  </div>
  % }
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        %= l('THANKS')
      </h3>
    </div>
    <div class="panel-body">
      <p>
        %== l('ABOUT_THANKS')
        <ul>
          % foreach my $component (sort keys %{$components}) {
            <li>
              <a href="<%= $components->{$component}->{url} %>">
                %= $component
              </a>
            </li>
          % }
        </ul>
      </p>
      <p>
        %= l('ABOUT_MUSICS')
        <ul>
          % foreach my $music (sort keys %{$musics}) {
            <li>
              %= $music
              %= l('FROM_AUTHOR')
              <a href="<%= $musics->{$music}->{author_url} %>">
                %= $musics->{$music}->{author}
              </a>
              (
              <a href="<%= $musics->{$music}->{licence_url} %>">
                %= $musics->{$music}->{licence}
              </a>
              )
            </li>
          % }
      </p>
    </div>
  </div>
</div>
%= include 'js_common'
%= include 'footer'