struct CountingView: View {
    @ObservedObject var player: Player //<-
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        List {
            Section(header: Text("counting.title") + Text(" \(player.name)")) { //<-
                if player.counterLog.count > 0 { //<-
                    ForEach(player.counterLog.indices, id: \.self) { index in //<-
                        VStack {
                            TextField("counting.titlePlaceholder", text: self.$player.counterLog[index].title) //<-
                            
                            HStack {
                                Button(action: {
                                    print("+")
                                    self.player.counterLog[index].count += 1 //<-
                                }) {
                                    HStack {
                                        Text("+")
                                            .font(.headline)
                                            .fontWeight(.black)
                                            .foregroundColor(Color.white)
                                            .padding(EdgeInsets(top: 12, leading: 32, bottom: 12, trailing: 32))
                                    }
                                }
                                //https://stackoverflow.com/a/59402642
                                .buttonStyle(BorderlessButtonStyle()) //<-
                                .background(Color.green)
                                .cornerRadius(10)
                                .padding(.leading, 4)
                                .padding(.trailing, 4)
                                
                                Spacer()
                                
                                Text("\(self.player.counterLog[index].count)") //<-
                                    .font(.system(.title))
                                    .fontWeight(.black)
                                
                                Spacer()
                                
                                Button(action: {
                                    print("-")
                                    self.player.counterLog[index].count -= 1 //<-
                                }) {
                                    HStack {
                                        Text("-")
                                            .font(.headline)
                                            .fontWeight(.black)
                                            .foregroundColor(Color.white)
                                            .padding(EdgeInsets(top: 12, leading: 32, bottom: 12, trailing: 32))
                                    }
                                }
                                .buttonStyle(BorderlessButtonStyle()) //<-
                                .background(Color.red)
                                .cornerRadius(10)
                                .padding(.leading, 4)
                                .padding(.trailing, 4)
                            }
                        }
                        .padding(.top, 8)
                        .padding(.bottom, 8)
                    }
                } else {
                    Text("log.noEntries")
                        .font(.system(.subheadline))
                        .fontWeight(.bold)
                        .frame(maxWidth: .infinity, alignment: .center)
                        .padding(.top, 32)
                        .padding(.bottom, 32)
                }
            }
            
            Section() {
                Button(action: {
                    self.player.addNewEntry() //<-
                }) {
                    HStack {
                        Spacer()
                        
                        Text("counting.addEntry")
                            .font(.headline)
                            .foregroundColor(Color.white)
                        
                        Spacer()
                    }
                }
            }
            .listRowBackground(Color.green)
            
            Section() {
                Button(action: {
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    HStack {
                        Spacer()
                        
                        Text("close")
                            .font(.headline)
                            .foregroundColor(Color.white)
                        
                        Spacer()
                    }
                }
            }
            .listRowBackground(Color.red)
        }
        .listStyle(GroupedListStyle())
        .environment(\.horizontalSizeClass, .regular)
    }
}