@GuideBook(title: "Navigation bar", icon: icon.png, background: background.png, firstFile: MyApp.swift) {
    @WelcomeMessage(title: "Navigation bar") {
        En navigation bar er en menu. Navigation bars findes i rigtig mange apps, og giver dig muligheden for at navigere rundt til forskellige sider og faner i din app. 
        Inden du kan lave en navigation bar, så sørg for at du har oprettet et nyt app projekt i Swift playground.
        
        Tryk på TabView opgaven for at starte opgaverne.
        }
    @Guide {
        @Step(title: "Lær at lave menuer i din app") {
            @ContentAndMedia {
                En navigation bar er en menu. Navigation bars findes i rigtig mange apps, og giver dig muligheden for at navigere rundt til forskellige sider og faner i din app. 
                Inden du kan lave en navigation bar, så sørg for at du har oprettet et nyt app projekt i Swift playground.
                
                Tryk på TabView opgaven for at starte opgaverne.
            }
            @TaskGroup(title: "Navigation bar") {
                I dette projekt lærer du at lave dine egne menuer i din apps. Du lærer at forstå koderne, ændre i koderne, samt lave menuer med forskellige antal sider. 
                
                Ydermere lærer du at kopiere koderne over i din egen app. 

                @Task(type: walkthrough, id: "TabView", title: "TabView", file: ContentView.swift) {
                    @Page(id: "1.modifier", title: "") {
                        TabView betyder hvor mange knapper Der skal være i menuen. 
                        
                        Koden I ser på denne side er TabView, som i dette tilfælde fortæller at der skal være tre faner; ViewA, ViewB og ViewC
                    }
                }
                @Task(type: walkthrough, id: "ViewA", title: "ViewA", file: ContentView.swift) {
                    @Page(id: "1.1.modifier", title: "") {
                        Nu skal vi kigge på den første fane (knap) i Navigation Bar kaldet ViewA. 
                    }
                }
                @Task(type: experiment, title: "Ændre ikonet til ViewA på din navigation bar", id: "home", file: ContentView.swift) {
                                
                                @Page(id: "HomeView.Image", title: "") {
                                    Vi skal nu ændre i teksten for ViewA. Koden på denne side indeholder både information om valg af ikon og tekst.
                                    
                                    Sådan ændrer du ikonet:
                                    1. Marker linjen med Image(systemName: "airplane.circle")
                                    2. Slet koden ved at markere koden og klikke på “slet”.
                                    3. Find et nyt ikon ved at trykke på stjernen i øverste menulinje
                                    4. Tryk på det ikon du gerne vil have
                                }
                            }
                @Task(type: experiment, title: "Ændre teksten til ViewA på din navigation bar ", id: "home2", file: ContentView.swift) {
                    
                    @Page(id: "HomeView2.Image", title: "") {
                        Her er ViewA. Koden her indeholder information om hvordan ikonet og teksten i vore navigation bar skal se ud.
                        
                        Sådan ændrer du teksten:
                        1. Vælg ("ViewA Text")
                        2. Slet teksten mellem de to " "
                        3. Skriv et nyt navn
                        4. Husk at der skal være parentes før og efter
                    }
                }
            }
           
               @TaskGroup(title: "ViewA") {
                   Koden på denne side fortæller noget om, hvad der skal være på fanen ViewA.  

                   @Task(type: walkthrough, id: "ViewA1", title: "Her er ViewA", file: ViewA.swift) {
                       @Page(id: "3.modifier", title: "") {
                           Her er den fane der hedder ViewA. Lige nu indeholder den kun en blå baggrund og det samme ikon, som vi brugte til vores navigation bar. Lad os ændre dem...
                       }
                   }
                   @Task(type: experiment, title: "Ændre baggrundfarven på ViewA", id: "ViewA2", file: ViewA.swift) {
                       
                       @Page(id: "3.1.modifier", title: "") {
                           
                           Sådan ændrer du baggrundsfarven:
                           1. Kig i paletten i øverste menulinje
                           2. find den farve du gerne vil have
                           3. vælg .blue i koden
                           4. Ændr det til den farve du gerne vil have
                       }
                   }
               }
               @TaskGroup(title: "ViewB") {
                   Koden på denne side fortæller noget om, hvad der skal være på fanen ViewB. 

                   @Task(type: walkthrough, id: "ViewB1", title: "Her er ViewB", file: ViewB.swift) {
                       @Page(id: "4.modifier", title: "") {
                           Her er den fane der hedder ViewB. Bemærk forskellen fra ViewA:
                           1. Ikonet er "eraser.fill"
                           2. Baggrundsfarven er anderledes - og måden farven er valgt er også anderledes
                       }
                   }
                   @Task(type: experiment, title: "Ændre baggrundfarven på ViewB", id: "ViewB2", file: ViewB.swift) {
                       
                       @Page(id: "4.1.modifier", title: "") {
                           
                           Hvis basisfarverne ikke er nok, så kan du bruge RGB-farveskemaet. Der kan du vælge hvor meget rød, grøn og blå farve der skal blandes sammen. På den måde kan du vælge lige præcis den farve du gerne vil have. Du kan læse mere om RGB farver her: https://www.figma.com/resource-library/what-is-rgb/
                           1. Prøv at ændre tallet foran / 255 på red, green og blue, så kan du se hvordan farven ændre sig.
                          
                       }
                   }
                   @Task(type: walkthrough, id: "ViewB3", title: "Mere om RGB farver", file: ViewB.swift) {
                       @Page(id: "4.2.modifier", title: "") {
                           Du kan læse mere om RGB farver her: https://www.figma.com/resource-library/what-is-rgb/
                       }
                   }
               }
               @TaskGroup(title: "ViewC") {
                   Koden på denne side fortæller noget om, hvad der skal være på fanen ViewC. Der sker noget mere på denne side.

                   @Task(type: walkthrough, id: "ViewC1", title: "Her er ViewC", file: ViewC.swift) {
                       @Page(id: "5.modifier", title: "") {
                           Her er den fane der hedder ViewC. Bemærk forskellen fra ViewA og ViewB:
                           1. Et nyt ikon - denne gang et spørgsmålstegn
                           2. Baggrundsfarven er variabel og kan ændres ved hjælp af en ColorPicker
                           2. Brug af @State til at styre baggrundsfarver
                           3. En rektangel med et farveforløb
                       }
                   }
                   @Task(type: walkthrough, id: "ViewC2", title: "@State", file: ViewC.swift) {
                       @Page(id: "5.1.modifier", title: "") {
                           Vi bruger en @State til at holde styr på baggrundsfarven. Læg mærke til at der står private var. Dette betyder at denne kode kun skal bruges på denne side og ikke i hele appen. Lige nu er baggrundsfarven .blue
                       }
                   }
                   @Task(type: walkthrough, id: "ViewC3", title: "ColorPicker", file: ViewC.swift) {
                       @Page(id: "5.2.modifier", title: "") {
                           Her er koden til vores ColorPicker
                       }
                   }
                   @Task(type: walkthrough, id: "ViewC4", title: "Tekst til ColorPicker", file: ViewC.swift) {
                       @Page(id: "5.3.modifier", title: "") {
                           Her kan vi ændre teksten til vores ColorPicker. Bemærk at der først er en tekst og derefter et ikon
                       }
                   }
                   @Task(type: walkthrough, id: "ViewC5", title: "farveforløb", file: ViewC.swift) {
                       @Page(id: "5.4.modifier", title: "") {
                           I denne kode har vi en rektangel og et farveforløb, hvor vi har defineret hvilke farver der skal være
                       }
                   }
                   @Task(type: walkthrough, id: "ViewC6", title: "mere om farveforløb", file: ViewC.swift) {
                       @Page(id: "5.5.modifier", title: "") {
                           Her definere vi hvor farveforløbet skal starte, og hvor det skal slutte
                       }
                   }
                   @Task(type: experiment, title: "Ændre baggrundfarven på ViewC", id: "ViewC7", file: ViewC.swift) {
                       
                       @Page(id: "5.6.modifier", title: "") {
                           
                           1. For at prøve ColorPicker, skal du køre din app. Tryk på Play kanppen i øverste menulinje, og vælg ViewC.
                           2. Nu kan du frit vælge farve.
                          
                       }
                   }
               }
               
               @TaskGroup(title: "ViewD?") {
                   Koden på denne side fortæller noget om, hvad der skal være på fanen ViewC. Der sker noget mere på denne side.

                   @Task(type: walkthrough, id: "ViewD1", title: "ViewD?", file: ContentView.swift) {
                       @Page(id: "D1", title: "") {
                           Lad os lave en fjerde fane kaldet ViewD
                       }
                   }
                   @Task(type: walkthrough, id: "ViewD2", title: "Hvordan laver man ViewD?", file: ContentView.swift) {
                       @Page(id: "D2", title: "") {
                          For at lave ViewD, så skal vi tilføje noget til vores TabView. Kan du gætte hvad det er? 
                          Har du brug for hjælp. så tryk videre til næste side
                       }
                   }
                   @Task(type: experiment, id: "ViewD3", title: "Kode til TabView", file: ContentView.swift) {
                       @Page(id: "ViewD3.1", title: "Tilføje kode til ViewD", isAddable: true) {
                                          Kopier denne kode og sæt ind nedenunder ViewC i Tabview
                                           ```
                                           ViewD()
                                            .tabItem() {
                                            Image(systemName: "questionmark.circle")
                                            Text("Text D")
                                            }
                                           ```
                                          
                                       }
                   }
                   @Task(type: walkthrough, id: "ViewD4", title: "ViewD fortsat", file: ViewC.swift) {
                       @Page(id: "D4", title: "") {
                           Nu er der en fejlkode i din App. Det er fordi vi mangler at tilføje ViewD som en side i dit projekt. For at løse det,skal du gøre følgende:
                           1. Åbn oversigten over vores Tabs. Dette gøre ved at trykke på ikonet i øverste venstre hjørne.
                           2. Lav en ny Swift fil. På iPad skal du holde en finger på mappen "App" og tilføje en ny fil. på Mac skal du højreklikke på "App" og vælge ny fil
                           2. Tryk eller klik på filen og omdøb den nye fil til ViewD
                           
                        }
                    }
                   @Task(type: experiment, id: "ViewD5", title: "kode til ViewD", file: ContentView.swift) {
                       @Page(id: "ViewD5.1", title: "Tilføje kode til ViewD", isAddable: true) {
                                          Kopier denne kode og sæt ind under den nye fil ViewD
                                           ```
                                           struct ViewD: View {
                                               var body: some View {
                                                   
                                    
                                               }
                                           }

                                           struct ViewD_Previews: PreviewProvider {
                                               static var previews: some View {
                                                   ViewD()
                                               }
                                           }

                                           ```
                                          
                                       }
                   }
               }    
            }
        }
