### ----------------------------------------------------
### -- Air
### -- Licenses: Artistic-2.0
### -- Authors: librasteve
### -- File: lib/Air/Base.rakumod
### ----------------------------------------------------
### -- Chunk 2 of 2
part.map(*.HTML)
    }
    multi sub do-part(@part where .all ~~ Array, :$head) {
        do for @part -> @row {
            tr do for @row.kv -> $col, $cell {
                given    	$col, $head {
                    when   	  *,    *.so  { th $cell, :scope<col> }
                    when   	  0,    *     { th $cell, :scope<row> }
                    default               { td $cell }
                }
            }
        }
    }

    multi method HTML {
        table |%(:$!class if $!class), [
            thead do-part($!thead, :head);
            tbody do-part($!tbody), :attrs(|%!tbody-attrs);
            tfoot do-part($!tfoot);
        ]
    }
}

=head3 role Grid does Tag

role Grid      does Component {
    #| list of items to populate grid,
    has @.items;
    #| col count (default 5)
    has $.cols = 5;
    #| row count (default 5)
    has $.rows = 5;
    #| row / col gap in em (default 0)
    has $.gap = 0;


    #| .new positional takes @items
    multi method new(*@items, *%h) {
        self.bless:  :@items, |%h;
    }

    # optional grid style from https://cssgrid-generator.netlify.app/
    method style {
        my $str = q:to/END/;
		<style>
			#%HTML-ID% {
				display: grid;
				grid-template-columns: repeat(%COLS%, 1fr);
				grid-template-rows: repeat(%ROWS%, 1fr);
				grid-column-gap: %GAP%em;
				grid-row-gap: %GAP%em;
			}
		</style>
		END

        $str ~~ s:g/'%HTML-ID%'/$.html-id/;
        $str ~~ s:g/'%COLS%'/$!cols/;
        $str ~~ s:g/'%ROWS%'/$!rows/;
        $str ~~ s:g/'%GAP%'/$!gap/;
        $str
	}

    multi method HTML {
        $.style ~
        div :id($.html-id), @!items;
    }
}

=head3 role Grid does Tag

role Flexbox   does Component {
    #| list of items to populate grid,
    has @.items;
    #| flex-direction (default row)
    has $.direction = 'row';
    #| gap bewteen items in em (default 1)
    has $.gap = 1;

    #| .new positional takes @items
    multi method new(*@items, *%h) {
        self.bless:  :@items, |%h;
    }

    # optional grid style from https://cssgrid-generator.netlify.app/
    method style {
        my $str = q:to/END/;
        <style>
            #%HTML-ID% {
                display: flex;
                flex-direction: %DIRECTION%; /* column row */
                justify-content: center;  /* centers horizontally */
                gap: %GAP%em;
            }

            /* Responsive layout - makes a one column layout instead of a two-column layout */
            @media (max-width: 768px) {
                #%HTML-ID% {
                    flex-direction: column;
                }
            }
        </style>
        END

        $str ~~ s:g/'%HTML-ID%'/$.html-id/;
        $str ~~ s:g/'%DIRECTION%'/$!direction/;
        $str ~~ s:g/'%GAP%'/$!gap/;
        $str
    }

    multi method HTML {
        $.style ~
        div :id($.html-id), @!items;
    }
}

##### Functions Export #####

#| put in all the @components as functions sub name( * @a, * %h) {Name.new(|@a,|%h)}
# viz. https://docs.raku.org/language/modules#Exporting_and_selective_importing
my package EXPORT::DEFAULT {

    for @functions -> $name {

        OUR::{'&' ~ $name.lc} :=
            sub (*@a, *%h) {
                ::($name).new( |@a, |%h )
            }
    }
}

my package EXPORT::NONE { }

=begin pod
=head1 AUTHOR

Steve Roe <librasteve@furnival.net>


=head1 COPYRIGHT AND LICENSE

Copyright(c) 2025 Henley Cloud Consulting Ltd.

This library is free software; you can redistribute it and/or modify it under the Artistic License 2.0.
=end pod


