module Image exposing (..)

import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Html exposing (Html)


white : Color
white =
    rgb 1 1 1


main : Html Bool
main =
    layout [ width fill, height fill ] <|
        column
            [ width <| maximum 600 fill
            , centerX
            , centerY
            , padding 20
            , spacing 20
            ]
            [ image []
                { src = "https://picsum.photos/300/200"
                , description = "An image"
                }
            , image [ width <| px 300, height <| px 200 ]
                { src = "https://picsum.photos/600/400"
                , description = "A 2x image"
                }
            , el [ Border.rounded 150, clip ] <|
                image []
                    { src = "https://picsum.photos/300/300"
                    , description = "Circular image"
                    }
            , el [ Border.rounded 8, Border.width 4, padding 4, clip ] <|
                image []
                    { src = "https://picsum.photos/300/300"
                    , description = "Bordered image"
                    }
            , el
                [ Background.image "https://picsum.photos/300/300"
                , width fill
                , padding 20
                , Font.size 32
                , Font.glow white 10
                ]
              <|
                text "Background image"
            , el
                [ Background.uncropped "https://picsum.photos/300/300"
                , width fill
                , padding 20
                , Font.size 32
                , Font.glow white 10
                ]
              <|
                text "Uncropped background image"
            , el
                [ Background.tiled "https://picsum.photos/100/100"
                , width fill
                , height <| px 200
                , padding 20
                , Font.size 32
                , Font.glow white 10
                ]
              <|
                el [ centerX, centerY ] <|
                    text "Tiled background image"
            , el
                [ Background.tiledX "https://picsum.photos/100/100"
                , width fill
                , height <| px 200
                , padding 20
                , Border.width 3
                , Font.size 32
                , Font.glow white 10
                ]
              <|
                el [ centerX, centerY ] <|
                    text "Horizontally tiled background image"
            ]