GRAV display all page.media items

I'm creating a website using GRAV CMS and I stumbled upon a problem that I need help with... I created a page that I want to list out all pdf-files that I upload in GRAV. I want the output to look something like that:

The pure hardcoded HTML for this looks like that:

    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-6">
                <ul class="downloads">
                    <li class="download-item pb-3">
                        <i class="fas fa-file-pdf fa-lg"></i>
                        <a href="./assets/downoads/file.pdf" class="action-btn m-0" download</a>
.
. etc...
.
                    </li>
    </ul>
    </div>
    </div>
    </div>

and the <li></li> is repeated as many times as the number of pdf-s...

The grav HTML and Twig combo looks like this:

<div class="container pt-5 pb-5">
    <div class="row">
        <div class="col-12">
            <ul class="downloads">
                {% for pdf in page.media %}
                    <li class="download-item pb-3">
                        <i class="fas fa-file-pdf fa-lg"></i>
                        <a href="{{ pdf.url }}" class="action-btn m-0" download></a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

Now this code does not work, it generates this error:

Twig_Error_Syntax:
Unexpected token "punctuation" of value "." ("operator" expected with value "in").

I have also tried this:

<div class="container pt-5 pb-5">
    <div class="row">
        <div class="col-12">
            <ul class="downloads">
                {% for manuals in page.media %}
                    <li class="download-item pb-3">
                        <i class="fas fa-file-pdf fa-lg"></i>
                        {% set pdf = manuals.media %}
                        <a href="{{ pdf.url }}" class="action-btn m-0" download></a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

and this:

<div class="container pt-5 pb-5">
    <div class="row">
        <div class="col-12">
            <ul class="downloads">
                <li class="download-item pb-3">
                    <i class="fas fa-file-pdf fa-lg"></i>

                    <a href="{{ page.media.url('/pdf') }}" class="action-btn m-0" download></a>
                </li>
            </ul>
        </div>
    </div>
</div>

Both of these result didn't generate an error like the above... the page loaded but in inspect element mode the <a></a> tag was empty (looked like this):

<a href="" class="action-btn m-0" download=""></a>

How can I achieve this or what is wrong with my code?

<div class="container pt-5 pb-5">
    <div class="row">
        <div class="col-12">
            <ul class="downloads">
<?PHP
    $path = "./filespath/"; //set the path of the folder that contains the files
    $dir_handle = @opendir($path) or die("Unable to open $path");
    while ($file = readdir($dir_handle)) 
    {if($file!="." && $file!=".." && is_file($path.$file)){$f[] = $file;}}
    closedir($dir_handle);
	if(count($f)>0){
    sort($f);//Set an order of the files
    $newpath=substr($path,2);//this takes out the ./ of the path
    foreach ($f as $val) {
    echo '
    <li class="download-item pb-3">
    <i class="fas fa-file-pdf fa-lg"></i>
    <a href="'.$newpath.$val.'" class="action-btn m-0" download>'.substr($val,0,-4).'</a><br>
    </li>
    ';
    }
	}
?>
                
            </ul>
        </div>
    </div>
</div>

I dont know how GRAV works, but this PHP code should help you. You only have to change the filespath where your files are located. The path of folders where your files are located ex: falconimogollon.com/here/there/filesarehere/ you only set $path = "./here/there/filesarehere/"; If you need further help, reply me. Good Luck