import { VerticalBox, ScrollView, HorizontalBox } from "std-widgets.slint";

export component HelpView inherits ScrollView {   
    preferred-height: 100%;
    preferred-width: 100%;

    VerticalBox { 

        alignment: start;
        Text {
            text: "📷 📹 Images";
            font-size: 20px;
        }
        HorizontalBox {
            Text { text: "To get started, first open a folder containing images and videos in the \"📷 📹  Images\" tab. A folder can be selected by pressing the \"📂 Browse...\" button. All images and videos\nfrom the folder and from all subfolders will be analyzed. Depending on the amount of images, this might take a while. Note that the last selected folder will be re-opened when\nImageSieve is started for the next time.\n\nOnce the folder has been processed, a list of file names will appear in the box to the right. This list contains the files that have been found in the folder and that will be\nconsidered in the sieving process. Each file has a set of icons that indicate its state.\n\nThe following icons are used (exact rendering depends on platform/font):\n\n- 📷: The file is an image\n- 📹: The file is a video\n- 🗑: The file is discarded\n- 🔀: There are similar files to this one\n- 📅: File is in the date range of an event\n\nTo select a file, click it and it will be shown in the image area. Below the image, some details about the file are listed. In order to discard an image, just click the upper part\nof it and it will be displayed in a translucent way. As an alternative, you can hit the space bar to toggle between discarded and kept state. To navigate between images, click on\nthe left or right side of the image or hit the left and right key on your keyboard.\nIf you want to open an image or a video with the default application in your OS, click the lower part of the image or press the \"Enter\" key.\n\nIf an image belongs to a group of similar images, all these similar images are displayed below the current image. The currently selected one is highlighted in blue. To navigate\nbetween similar images, you can use the up and down key.\n\nNote that video files are also displayed in the list of images and previewed as a 3x3 matrix of screenshots. Similiarities are not calculated for video files.";
            font-size: 14px;} 
        }
        Text {
            text: "📅 Events";
            font-size: 20px;
        }
        HorizontalBox {            
            Text { text: "Per default, the images will be sorted in folders corresponding to the months they were taken, like \"09-2021\", \"10-2021\" etc. To be able to find images more quickly in an\narchive, ImageSieve supports grouping pictures with the help of events in the \"Events\" tab. Events are named date spans that will provide a target folder name during the sieve\nprocess, like \"2021-10-07 - 2021-10-10 Cool trip\". All images taken in the given period of time will be put into that folder. You can specify an arbitrary number of events, but\nbe aware that in case of overlapping dates, an image is put into the folder of the first matching event.\n\nTo add an event, fill the start date, end date and name text box and click the \"➕ Add\" button. Valid date formats are YYYY-MM-DD or DD.MM.YYYY. You can edit existing events by\nmodifying their fields and pressing enter - the updated values will be taken over and be visible in the event's caption when you click the \"💾 Update\" button. To remove an event,\nclick the \"🗑 Remove\" button.\nThe time spans of events must not overlap.\n\nBe aware that the events are saved in the currently selected folder along with the selection of images.";
            font-size: 14px;}
        }
        Text {
            text: "⚙ Settings";
            font-size: 20px;
        }
        HorizontalBox {
            Text { text: "In the settings tab, you can specify the behavior of the similarity detection process. You can turn on and off both the use of the file/capture date as an indicator for similarity\nand the similarity calculation.\n\nNote that the similarity calculation takes some time and will not be available right from the start of the tool, especially if the number of files is huge. The similarity can be\ntweaked in order to provide better results.";
            font-size: 14px;} 
        }
        Text {
            text: "💾 Sieve";
            font-size: 20px;
        }
        HorizontalBox {
            Text { text: "When you are done sorting the images, the sieving process can be started. Go to the \"💾  Sieve\" tab and select a sieving mode. The following modes are supported:\n\n- Copy to target directory: Copies only the kept items to the target directory creating folders for the items, the source directory will be left untouched.\n- Move to target directory: Moves the kept items to the target directory creating folders for the items, effectively removing them from the source directory. Discarded items will\nstay in the source directory.\n- Move to target directory and delete in source directory: Moves the kept items to the target directory creating folders for the items and deletes discarded items in the source\ndirectory. If the source directory contained only images and videos, it will be empty afterwards (except for sub folders).\n- Delete in source directory: Deletes all discarded items in the source directory.\n\nDepending on the mode, you need to indicate a target directory that is used for the result of the sieving process. Once you are done, click the \"✅ Start\" button and the sieve\nprocess will start.";
            font-size: 14px;}
        }
    }
}