import os
folder = "./images/"
#defining as a list
images = []
titles = []
#shows all the images 
os.listdir(folder)
for image in os.listdir(folder):
    print(image)
    print(folder + image)
    print("---")
    images.append(folder + image)
    titles.append(image)

#html
counter = 0
all_cards = ""

for image in images:
    #html image element
    img = f"<img src='{ image }'>"
    #img = "<img src="' + image +"'>"
    
    #define title
    title = titles[counter] 
    
    #printing to inspect
    print(img)
    
    #mini template for card
    card = f"""
    <div class="card">
        <h2>{ title }</h2>
        <p>{ img }</p>
    </div>
    """
    #printing to inspect mini template
    print(card)
    
    #add it to the all cards variable
    all_cards = all_cards + card
    #we add +1 to our counter 
    
counter = counter + 1
html = f"""
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex card</title>
        <link href="stylesheet.css" rel="stylesheet">
    </head>
    <body>
<h1>gardening cards for lil gardeners</h1>
    <section>
    { all_cards }
    </section>
</body> 
</html>

"""
with open("cards.html", "w") as output:
    output.write(html)